el-table 简单编辑功能

效果图获得的表格数据展示第一步：表格数据处理。将每行数据都添加属性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() }) }