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-button
v-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
原文地址:https://blog.csdn.net/weixin_49352307/article/details/140690978
免责声明:本站文章内容转载自网络资源,如本站内容侵犯了原著者的合法权益,可联系本站删除。更多内容请关注自学内容网(zxcms.com)!