<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
      //修改逻辑
    },

Logo

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐