el-table 简单的行内编辑，单行可编辑

 

<div class="btns" style="margin-bottom: 2vh;">
        <el-button  type="primary" icon="el-icon-plus" size="small" @click="addRow()">新 增</el-button>
      </div>
      <el-table :data="dataList"  class="table-fixed" style="width: 100%">
        <el-table-column prop="columnTest" label="示例字段" width="130">
          <template slot-scope="scope">
            <el-input  v-model="scope.row.columnTest" :disabled="!(scope.row.isEdit || scope.row.isAdd)" />
          </template>
        </el-table-column>
        <el-table-column prop="capitalAmount" align="center" label="操作" width="120">
         <template slot-scope="scope">
            <el-button @click="save(scope.row)" v-show="scope.row.isAdd" type="text" size="small" icon="el-icon-edit">保存(新增)</el-button>
            <el-button @click="deleteRow(scope.$index)" v-show="scope.row.isAdd" type="text" size="small" icon="el-icon-delete">取消(新增)</el-button>
            <el-button @click="update(scope.row)" v-show="scope.row.isEdit" type="text" size="small" icon="el-icon-edit">保存(修改)</el-button>
            <el-button @click="cancel(scope.row)" v-show="scope.row.isEdit" type="text" size="small" icon="el-icon-delete">取消(修改)</el-button>
            <el-button @click="edit(scope.row)" v-show="!scope.row.isEdit && !scope.row.isAdd" type="text" size="small" icon="el-icon-edit">编辑</el-button>
          </template>
        </el-table-column>
      </el-table>

细分位表格上面的新增（新增空白行）按钮、行内的保存，取消，编辑等按钮。

点击新增->新增行,行可编辑（行内按钮 保存（新增），取消（新增）) ，点取消，删除行

点击新增->新增行,行可编辑（行内按钮 保存（新增），取消（新增）) ，点保存，执行新增逻辑，按钮变为编辑,行不可编辑

点编辑 -> 行可编辑 （行内按钮 保存（修改），取消（修改）)，点取消，删除行，按钮变为编辑,行不可编辑

点保存，执行修改逻辑，按钮变为编辑,行不可编辑

需要给dataList绑定 isEdit,isAdd属性，已实现以上功能

  data() {
    return {
       dataList:[]
}



 addRow() {
      let row = {
        isEdit : false,
        isAdd : true
      }
      this.dataList.push(row) 
    },
    //新增取消 - 删除行
    deleteRow(index) {
      this.dataList.splice(index, 1)
    },
    //修改取消 
    cancel(row) {
      row.isEdit = false
    },
    edit(row) {
      row.isEdit = true
    },
    save(row) {
      row.isEdit = false
      row.isAdd = false
      //保存逻辑
    },
    update(row) {
      row.isEdit = false
      //修改逻辑
    },