Vue3与Element-plus配合 直接修改表格中的一项数据——控制输入框的显示与隐藏

 利用控制与隐藏输入框,直接修改表格中的每一项数据。

<!-- 表格模块 -->
<div><el-table :data="tablelist" style="width: 100%"><el-table-column align="center" prop="deposit" label="接单押金"><template #default="{ row, $index }"><span v-if="!showEdit[$index]">{{ row.deposit }}</span><div v-else style="margin-left: 200px; width: 100px"><el-input v-model="row.deposit" placeholder="请输入分类名"></el-input></div> </template></el-table-column><el-table-column align="center" label="操作"><template #default="{ row, $index }"><!-- 编辑 --><el-buttonv-if="!showEdit[$index]"type="primary"@click="Edit(row, $index)"plain>编辑</el-button><!-- 编辑确认 --><el-button v-else type="primary" @click="sure(row, $index)" plain>确认</el-button></template></el-table-column></el-table>
</div>

// #region *****************点击编辑控制输入框显示与关闭模块****************
const showEdit = ref<boolean[]>([])
// 编辑处理
const Edit = (row: any, index: any) => {//vue3使用数组添加数据showEdit.value[index] = true
}
// #endregion
// #region *****************确认编辑模块****************
const sure = async (row: any, index: any) => {console.log(row)showEdit.value[index] = false// 表单预校验// await form.value.validate()// 发起修改请求// await updatePageClassServe(row).then(() => {//     ElMessage.success('修改成功！')//     showEdit.value = []// })// 重新获取分类数据，渲染页面// getChannelList()
}
// #endregion