共计 2229 个字符，预计需要花费 6 分钟才能阅读完成。
效果图
获得的表格数据展示
第一步：表格数据处理。将每行数据都添加属性 editAble，每个 0 与当前行每一列对应；通过修改对应的 editAble[i] 的值控制编辑可能，0 不可编辑，1 可编辑
data.listRemain.forEach((row,index) => {
//editAble 数组长度 = 表格列数
// 可 new 一个数组，使用 editAble.fill(0) 填充 0，
row.editAble = [0,0,0,0,0,0,0,0,0];
});
第二步：el-table 列的 scope 处理。这里是金额列的编辑，所以使用了 el-input-number，可根据需要换成 el-input。
<el-table
:data=”listRemain”
highlight-current-row>
<el-table-column
label=” 年初余额 ”
show-overflow-tooltip>
<template slot-scope=”scope”>
<el-input-number
clearable
:precision=”2″ // 小数位精度
:controls=”false”
v-model=”scope.row.balance”
:key=”scope.row.chr_id”
// 根据 editAble，判断是否显示编辑框，edit[0]= 1 时显示，0 是列的 index, 从 0 开始
v-if=”(scope.row.editAble || [])[0]”
v-focus// 获取焦点，若不生效可改为 v -el-focus, 定义方法见文章最后“其他”
@focus=”$event.target.select()”
@blur=”getValue(scope.row, 0,’balance’)”>
</el-input-number>
<div class=””
v-else //editAble[0]= 0 时编辑框隐藏
// 双击单元格，将单元格对应列的 editAble[0] 的值改为 1，则编辑框 el-input-number 即可显示
@dblclick=”cellClick(scope.row, 0, ‘balance’)”>
//formatMoney 是金额格式化方法
{{scope.row.balance | formatMoney(scope.row.balance,0) }}
</div>
</template>
</el-table-column>
</el-table>
第三步：相关 js 方法
<script>
export default {
data(){
return{
listRemain:[],
}
},
directives: {
focus: {// v-focus 指令的定义
inserted: function (el) {
$(el).find(‘input’).focus()
}
}
},
methods:{
// 编辑事件（双击触发）
cellClick(row, index,prop){
this.inputAbstract(row.editAble,index)
},
// 将对应列的 editAble[index] 值改为 1
inputAbstract(editAble, index) {
editAble.splice(index, 1, 1)
},
// 隐藏编辑框
getValue(row, index,prop) {
var vm = this;
setTimeout(vm => {
// 将对应列的 editAble[index] 值改为 0
row.editAble.splice(index, 1, 0);
}, 150)
},
}
}
</script>
其他种类编辑示例：动态列 input 带按钮, 可进行点击按钮跳出选择模态框树等操作
<el-table-column
v-for=”(col,index) in detailTableHead”
:key=’col.prop’
:prop=”col.prop”
:label=”col.label” >
<template slot-scope=”scope”>
<!– 基本要素 –>
<el-input
v-focus
:trigger-on-focus=false
v-if=”(scope.row.editAble || [])[index] ”
v-model=”scope.row[col.prop]”
@blur=”getValue(scope.row, index, col.prop)”>
<el-button slot=”append” icon=”el-icon-more” @click=”getEle(col)”></el-button>
</el-input>
<!– 不可编辑 要素 –>
<div class=”text-show”
v-else
v-text=”scope.row[col.prop]”
@dblclick=”cellClick(scope.row, index, col.prop)”>
</div>
</template>
</el-table-column>
其他：
import Vue from ‘vue’
// 注册一个全局自定义指令 `v-el-focus`, 用于 element-ui input 聚焦，可写在 main.js 里
Vue.directive(‘el-focus’, {
inserted: function(el) {
// 聚焦元素
Vue.nextTick(function() {
el.getElementsByTagName(‘input’)[0].focus()
})
}
