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()
    })
  }