vue3+element plus编辑表格

    <el-table v-loading="loading" :data="userInfoList" @selection-change="handleSelectionChange">
      <el-table-column label="指标项" align="center" prop="name"/>
      <el-table-column label="数量" align="center" prop="num">
        <template #default="scope">
          <span v-show="scope.row.id !== editId">{{ scope.row.num }}</span>
          <el-input
              v-show="scope.row.id === editId"
              v-model="scope.row.num"
          ></el-input>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template #default="scope">
          <el-button link type="primary" icon="Edit" @click="handleUpdate2(scope.row)" v-show="scope.row.id !== editId">
            表格修改
          </el-button>
          <el-button link type="primary" icon="Edit" @click="submitForm2(scope.row)" v-show="scope.row.id === editId">
            完成
          </el-button>  
        </template>
      </el-table-column>
    </el-table>

/** 修改按钮操作 */
function handleUpdate2(row) {
  editId.value = row.id;
}
/** 修改完成提交按钮 */
function submitForm2(row) {
    editId.value = 0;
}

image.png