VUE+Element UI实现简单的表格行内编辑效果

VUE+Element UI实现简单的表格行内编辑效果
原理是通过Css控制绑定的输入控件与显示值,在选中行样式下对控件进行隐藏或显示

<el-table
class="tb-edit"
style="width: 100%"
size="mini"
highlight-current-row
@row-click="handleCurrentChange"
:data="tensRegulations"  ref="multipleTable"
@selection-change="handleSelectionChange">
<el-table-column
align="center"
prop="regulationsName"
label="制度名称"
min-width="21%"
:show-overflow-tooltip="true">
</el-table-column>
<el-table-column
align="center"
label="是否出台"
min-width="21%"
:show-overflow-tooltip="true">
<template  slot-scope="scope">
<el-select  v-model="scope.row.isIntroduce" placeholder="请选择">
<el-option
v-for="item in isIntroduce"
:key="item"
:label="item"
:value="item">
</el-option>
</el-select>
<span>{{scope.row.isIntroduce}}</span>
</template>
</el-table-column>
<el-table-column
align="center"
label="出台时间"
min-width="45%"
:show-overflow-tooltip="true">
<template slot-scope="scope">
<el-date-picker
style="width: 80%"
v-model="scope.row.introduceTime"
type="date"
placeholder="选择日期"
value-format="yyyy-MM-dd">
</el-date-picker>
<span>{{scope.row.introduceTime}}</span>
</template>
</el-table-column>
<el-table-column
align="center"
label="本旬进展"
min-width="21%"
:show-overflow-tooltip="true">
<template slot-scope="scope">
<el-select  v-model="scope.row.regulationsTensStatus" placeholder="请选择">
<el-option
v-for="item in tablePlan"
:key="item"
:label="item"
:value="item">
</el-option>
</el-select>
<span>{{scope.row.regulationsTensStatus}}</span>
</template>
</el-table-column>
<el-table-column
align="center"
label="本旬执行情况"
min-width="21%"
:show-overflow-tooltip="true">
<template slot-scope="scope">
<el-input @change="handleEdit(scope.$index, scope.row)" v-model="scope.row.executionStatus"></el-input><span>{{scope.row.executionStatus}}</span>
</template>
</el-table-column>
<el-table-column
align="center"
label="累计执行情况"
min-width="21%"
:show-overflow-tooltip="true">
<template slot-scope="scope">
<el-input v-model="scope.row.regulationsNextTensPlan"></el-input><span>{{scope.row.regulationsNextTensPlan}}</span>
</template>
</el-table-column>
<el-table-column
align="center"
prop="title"
label="已印发文件"
min-width="21%"
:show-overflow-tooltip="true">
<el-table-column
align="center"
prop="title"
label="发文名称"
min-width="49%"
:show-overflow-tooltip="true">
<template slot-scope="scope">
<el-input   v-model="scope.row.officeIssueName"></el-input><span>{{scope.row.officeIssueName}}</span>
</template>
</el-table-column>
<el-table-column
align="center"
prop="title"
label="发文机关"
min-width="21%"
:show-overflow-tooltip="true">
<template slot-scope="scope">
<el-input   v-model="scope.row.officeIssueOrgan"></el-input><span>{{scope.row.officeIssueOrgan}}</span>
</template>
</el-table-column>
<el-table-column
align="center"
prop="title"
label="发文文号"
min-width="21%"
:show-overflow-tooltip="true">
<template slot-scope="scope">
<el-input   v-model="scope.row.regulationsIssueDocument"></el-input><span>{{scope.row.regulationsIssueDocument}}</span>
</template>
</el-table-column>
<el-table-column
align="center"
prop="title"
label="操作"
min-width="21%"
:show-overflow-tooltip="true">
<template slot-scope="scope">
<el-button @click="detailRow(scope.row)" type="text" size="small" >查看</el-button>
<el-upload
class="upload-demo"
:file-list="tableFileList"
:on-change="handleChangesTable"
:before-upload="beforeCoverUpload"
:on-exceed="handleExceedFile"
:on-success="handleAvatarSuccess"
:before-remove="beforeRemoveFile"
action="https://jsonplaceholder.typicode.com/posts/"
:http-request="handleChangeFileTable">
<el-button size="small" type="primary" @click="upload(scope.row)">上传</el-button>
<!--<div slot="tip" class="el-upload__tip">只能上传pdf/docx文件</div>-->
</el-upload>
</template>
</el-table-column>
</el-table-column>
</el-table>
data(){
return{
tensRegulations:[
{
executionStatus: "",
introduceTime: "",
isIntroduce: "",
officeIssueName: "",
officeIssueOrgan: "111",
regulationsIssueDocument: "",
regulationsIssueTime: "",
regulationsName: "河长会议制度",
regulationsNextTensPlan: "",
regulationsTensStatus: "",
regulationsUrl:''
},
{
executionStatus: "",
introduceTime: "",
isIntroduce: "",
officeIssueName: "",
officeIssueOrgan: "",
regulationsIssueDocument: "",
regulationsIssueTime: "",
regulationsName: "信息报送制度",
regulationsNextTensPlan: "",
regulationsTensStatus: "",
regulationsUrl:''
},
],
}
}，
methods:{
handleEdit(index, row) {
// console.log(index, row);
},
handleCurrentChange(row, event, column) {
// console.log(row, event, column, event.currentTarget)
},
handleDelete(index, row) {
console.log(index, row);
}
}
<style>
.tb-edit .el-input {
display: none
}
.tb-edit .current-row .el-input {
display: block
}
.tb-edit .current-row .el-input+span {
display: none
}
.tb-edit .current-row .el-select+span {
display: none
}
</style>