要素UIの編集可能なフォーム

要件: テーブル table は編集可能をサポートしており、確認、キャンセル、編集、削除のイベントがあります。確認とキャンセル、編集と削除が 1 つのグループになっており、OK をクリックすると入力ボックスは編集不可の状態となり、操作バーに編集ボタンと削除ボタンが表示されます。「編集」をクリックすると、入力が可能になります。「キャンセル」をクリックすると、最後に書き込まれたデータをエコーする必要があります。削除は、現在編集されている行をテーブルから削除します。
フロントエンド効果:
1. [追加] をクリックすると、テーブルに列が表示されます。

2 データを入力後、「OK」をクリックすると、操作欄に「編集」「削除」と表示され、入力ボックスが編集不可の状態になります 3 「編集」をクリックすると、対応する列が入力可能な状態になります 4 「キャンセル」をクリックすると、前回書き込んだデータをエコーし​​ます: 「追加」をクリックしてデータを入力 - 「OK」をクリックし、「編集」をクリックしてデータを入力 - 「キャンセル」をクリックしてデータをエコーし​​てから「OK」をクリックし

ます

。

コード：

<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)
    };

これで、上記の要件を達成できます。質問がある場合は、v 876942343 を追加してください。