element-ui表格组件el-table实现行编辑与新增功能

       element前端ui组件挺美观的，我们也使用了他们的table组件，但是默认没有提供行编辑功能，我们可以通过将table的每个单元格换成input框来巧妙实现。默认每个单元格就是一个template数据填充，不可编辑；我们可以在template里面包裹一个input框来实现单元格可编辑；等每一个单元格都可编辑的时候，我们可以在每一行后面加一个按钮来控制只可编辑当前行。

      先来看一下原始不可编辑的写法：

     
       
     

     再来看一下可编辑的写法：

     
     
       
     
     
       
     

.................
   

      注意在每一个template元素里面我都放了一个input元素，依然使用v-model绑定值，只不过加了一个disable属性来控制是否可编辑；页面初始化的时候，默认整个表格不可编辑，只有点击了某一行后面的编辑按钮以后，这一行才可以编辑。

      由于在vue的精华与核心就是“数据绑定”，页面上的几乎所有属性都可以通过数据来定义，所以我这里采用将disable属性定义在每一行的disable变量里面，这样点击当前行的编辑按钮时，只会改变当前行的编辑状态。我们先来看一下上面改进后遗留的按钮代码：

       

     我在每一行后面添加了一个“编辑”按钮，当点击编辑按钮时，按钮栏变为保存和取消两个按钮；他们的状态更换变量通过edit来定义实现

// 编辑

startEdit(row) {
      row.edit = !row.edit;
      row.disabled = true;
    },

// 保存
confirmEdit(row) {
      row.edit = false;
      row.originalValue = row.address;
      if (row.tel == null || row.address == null) {
        this.loadAppConfigs();
        return;
      }
      let name= this.params.name;
      const p = {...row, name};

      // 调用更新方法
      updateXXXXx(p);
      this.$message({
        message: '已修改!',
        type: 'success'
      });
      row.disabled = false;
      if (row.id === undefined) {
        // 重新加载该页面
      }
},

    // 取消
cancelEdit(row) {
      row.address = row.originalValue;
      row.edit = false;
      row.disabled = false;
      this.$message({
        message: '已取消修改!',
        type: 'warning'
      });
      if (row.id === undefined) {

        // 重新加载该页面
      }
    }

}

      表格绑定数据源data本身是一个数组，新增一行即是往数组中再添加一个元素，不过如果我们想新增一行时显示在表格的第一行，那么就要用到unshift方法，另外需要在新增一行时处于可编辑状态，还要注意定义一个新行时的状态变量值，因为新增的是一个空输入框，需要我们来输入值，而不是一个默认值帮我们自动生成：

// 增加行
    addRow () {
      let newLine = {
        tel: this.tel,
        address: this.address,
        edit: true, // 新增时处于可编辑状态，所以按钮是保存和取消
        disabled: true // 打开编辑状态
      };
      this.list.unshift(newLine); // 移到第一行
    },

     另外为input框设置了disable属性以后，当不可编辑时处于禁用状态，此时文本字体颜色比较暗淡不清晰，看上去不美观，我们的目的是不让他编辑，但是依然需要正常显示颜色，这种情况只能通过重新定义input的样式来实现：