elementui editable form

Requirements: The table table supports editability, and has confirm, cancel, edit, delete events. Confirm and cancel are one group, and edit and delete are one group. After clicking OK, the input box is in an uneditable state, and the operation bar displays edit and delete buttons. When you click Edit, the input is available for input, and when you click Cancel, you need to echo the last written data. Delete deletes the currently edited row from the table.
Front-end effect:
1. When you click Add, a column will appear in the table

2 After entering the data, click OK, and the operation column will display edit, delete, and the input box is in an uneditable state. 3

When you click Edit, the corresponding column is

in an inputtable state. 4 Click Cancel to echo the data written last time: Click Add-Enter Data-Click OK, Click Edit-Enter Data-Click Cancel-Echo the data before clicking OK.

Code:

<div style="width: 100%">
    <el-button @click="add" type="text" size="small" icon="CirclePlus">添加</el-button>
</div>
<el-table border :data="form.infoList" style="width: 100%">
     <el-table-column prop="id" label="序号" width="50" type="index" align="center"
                        :index="index=>index+1"/>
       <el-table-column prop="name" label="姓名" align="center">
           <template #default="scope">
               <span v-show="!scope.row.editFlag">{
   
   {scope.row.name}}</span>
               <el-input v-show="scope.row.editFlag"
                         v-model="scope.row.name">
               </el-input>
           </template>
       </el-table-column>
       <el-table-column prop="age" label="年龄" align="center">
           <template #default="scope">
               <span v-show="!scope.row.editFlag">{
   
   {scope.row.age}}</span>
               <el-input v-show="scope.row.editFlag"
                         v-model="scope.row.age">
               </el-input>
           </template>
       </el-table-column>
       <el-table-column label="操作" width="120" align="center">
           <template #default="scope">
               <div style="display: flex;">
                   <el-button size="small"
                              type="text"
                              icon="CircleCheck"
                              v-show="scope.row.editFlag"
                              @click="submit(scope.row)">确定
                   </el-button>
                   <el-button size="small"
                              type="text"
                              icon="CircleClose"
                              v-show="scope.row.editFlag"
                              @click="cancel(scope.row,scope.$index)">取消
                   </el-button>
                   <el-button size="small"
                              icon="Edit"
                              type="text"
                              v-show="!scope.row.editFlag"
                              @click="edit(scope.row)"> 编辑
                   </el-button>
                   <el-button size="small"
                              icon="Delete"
                              type="text"
                              v-show="!scope.row.editFlag"
                              @click="del(scope.row.$index)">删除
                   </el-button>
               </div>
           </template>
       </el-table-column>
 </el-table>

//点击添加
 const add = () => {
        form.value.infoList.push({
            'name': '',
            'age': '',
            'editFlag': true,  // 可编辑标识
            'isSubmit': false, // 是否点击确定标识
        })
    };

 // 确定
    const submit= (row) => {
        row.editFlag = false
        row.isSubmit = true
    };
    // 取消
    const cancel = (row, index) => {
        row.editFlag = false
        if (row.isSubmit) {
            form.value.infoList[index] = v.value
        } else {
            delVersion(index);
        }
    }
    // 编辑
    const editVersion = (row) => {
        v.value = JSON.parse(JSON.stringify(row));
        row.editFlag = true;
    };
    // 删除
    const delVersion = (index) => {
        form.value.infoList.splice(index, 1)
    };

Then you can achieve the above requirements, if you have any questions, add v 876942343