vue element-ui 实现表格可编辑，删除，和添加

<el-row>
                    <el-col :span="24">
                      <el-button type="primary" size="small" icon="el-icon-circle-plus-outline" @click="add()" class="btn1" style="float:left;margin:-10px 0 10px 30px">添加</el-button>
                    </el-col>
                    <el-col :span="24">
                      <el-table size="small" 
                      :data="master_user.data" 
                      border 
                      style="width: 100%;font-size:15px"
                      highlight-current-row
                      :row-style="tableRowStyle"
                      :header-cell-style="tableHeaderColor"
                      :cell-style="{padding:'2px'}">
                      <el-table-column type="selection"></el-table-column>
                        <el-table-column type="index" label="序号" width="80" align="center"></el-table-column>  
                        <el-table-column 
                        v-for="(item,index) in master_user.columns" 
                        :label="item.label" 
                        :prop="item.prop" 
                        :width="item.width" 
                        :data="item" 
                        v-bind:key="index"
                        align="center">
                          <template slot-scope="scope">
                            <span v-if="scope.row.isSet">
                              <el-input size="small" placeholder="请输入内容" v-model="master_user.sel[item.prop]">
                              </el-input>
                            </span>
                            <span v-else>{{scope.row[item.prop]}}</span>
                          </template>
                        </el-table-column>
                        <el-table-column label="操作" width="150px" align="center">
                          <template slot-scope="scope">
                            <el-link type="primary" @click.stop="saveRow(scope.row,scope.$index)">
                              确定
                            </el-link>
                            <el-link type="warning" @click="editRow(scope.row,scope.$index)">
                              编辑
                            </el-link>
                            <el-link  type="danger" @click="deleteRow(scope.$index,master_user.data)">
                              删除
                            </el-link>
                          </template>
                        </el-table-column>
                      </el-table>
                    </el-col>
                  </el-row>
  master_user: {
    sel: null, //选中行   
    columns: [{
        prop: "type",
        label: "准入条件称号",
        width: 120
      },
      {
        prop: "addport",
        label: "准入条件编号",
        width: 150
      },
      {
        prop: "user",
        label: "企业类型",
        width: 120
      },
      {
        prop: "pwd",
        label: "准入条件描述",
        width: 220
      },
      {
        prop: "info",
        label: "准入公式",
        width: 120
      }
      ,
      {
        prop: "info",
        label: "是否启用",
        width: 120
      }
      ,
      {
        prop: "info",
        label: "录入人"
      }
      ,
      {
        prop: "info",
        label: "录入时间",
        width: 120
      }
    ],
    data: [
      {
      type:"老王",
      pwd:"萨达是法法师法师发光飞碟的公式公式公式公式法施工"
     },
     {
      type:"老王",
      pwd:"萨达是法法师法师发光飞碟的公式公式公式公式法施工"
     },
     {
      type:"老王",
      pwd:"萨达是法法师法师发光飞碟的公式公式公式公式法施工"
     },
     {
      type:"老王",
      pwd:"萨达是法法师法师发光飞碟的公式公式公式公式法施工"
     },
     {
      type:"老王",
      pwd:"萨达是法法师法师发光飞碟的公式公式公式公式法施工"
     },
     {
      type:"老王",
     },
     {
      type:"老王",
      pwd:"萨达是法法师法师发光飞碟的公式公式公式公式法施工"
     },
     {
      type:"老王",
      pwd:"萨达是法法师法师发光飞碟的公式公式公式公式法施工"
     },
     {
      type:"老王",
      pwd:"萨达是法法师法师发光飞碟的公式公式公式公式法施工"
     }
     ],
  },
  }
},

 add() {
        for (let i of this.master_user.data) {
          if (i.isSet) return this.$message.warning("请先保存当前编辑项");
        }
        let j = {
          "type": "",
          "addport": "",
          "user": "",
          "pwd": "",
          "info": "",
          "isSet": true,
        };
        this.master_user.data.push(j);
        this.master_user.sel = JSON.parse(JSON.stringify(j));
      },
      saveRow(row, index) { //保存
        let data = JSON.parse(JSON.stringify(this.master_user.sel));
        for (let k in data) {
          row[k] = data[k] //将sel里面的value赋值给这一行。ps(for....in..)的妙用，细心的同学发现这里我并没有循环对象row
        }
        row.isSet = false;
      },
      editRow(row) { //编辑
        for (let i of this.master_user.data) {
          if (i.isSet) return this.$message.warning("请先保存当前编辑11项");
        }
        this.master_user.sel = row
        row.isSet = true
      },
      deleteRow(index, rows) { //删除
        rows.splice(index, 1)
      }

转附上链接https://www.jianshu.com/p/cba4761de6ef