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。

第三步：相关js方法

其他种类编辑示例：
动态列
input带按钮,可进行点击按钮跳出选择模态框树等操作

其他：

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