VUE3-element-plus el-table子节点懒加载删除,编辑不刷新解决方案

这个事儿恶心我一上午,上网百度了良久,他们的方案行不行我不知道,但是本人用的是setup操作,这里边不支持this,虽然可以通过 getCurrentInstance 获取到与this相同的效果,但是

官网都这么说了,你好意思在应用代码里边用吗?

进入正题

首先el-table 设置了lazy=true 的属性后可以实现树状结构懒加载,懒加载函数是通过属性load传入一个函数来实现的

可以看到该函数支持是哪个参数

row: 毋庸置疑,当前行,也就是父节点的行数据

treeNode: 树结构的节点属性

resolve: 是一个函数,用来加载子节点数据

通过控制台打印可以看到treeNode结构如下:

这里比较关键的就是loading这个属性,这个属性决定了会不会重新加载子节点。知道这个就好办了,我们只需要在适当的时候将loading的值改为true不就可以了?

这个时候又有一个新的问题出现了,那就是load定义的函数只有在第一次打开子节点的时候才会触发,其他时候不会触发,那么这个时候就需要我们手动操作了。我这里在其他的博客中吸取了一下经验,在进入子节点的时候将row,treeNode,resolve保存起来,在需要的时候手动调用load定义的函数即可。保存的方式很多,因为不需要持久化,那么我直接选用map

let maps = ref(new Map())

// load 函数中的将当前行信息保存
maps.value.set(row.id, {row, treeNode, resolve})

//适当的时候取出来,将treeNode的loading设置为true即可,然后重新调用load属性定义的函数,我这里定义//的函数名叫做loadChildren
let rtr = maps.value.get(row.parent);
if (rtr){
rtr.treeNode.loading = true
loadChildren(rtr.row, rtr.treeNode, rtr.resolve)
}

这样定义map本人也是借鉴别的博文,但是他们取值的时候是这样的:
 

let {row,treeNode,resolve} = maps.value.get(xxx)

我尝试了一下,row的值总是空,不知道为啥,最后只能选择以下

let rtr = maps.value.get(row.parent);

然后通过属性的方式一个一个获取

本人是个java后端开发,前端不是很好,如果有什么不对的地方请多指正

  • 3
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 8
    评论
Vue3 TS 环境下,使用 Element Plus 的 ElTable 组件,可以通过设置 edit-config 属性来实现单元格可被编辑的功能。具体实现步骤如下: 1. 首先需要安装 Element Plus,可以使用命令 npm install element-plus 安装。 2. 在组件中引入 ElTable 组件,并设置相关属性,如 columns、data 等。 3. 在 ElTable 组件上设置 edit-config 属性,该属性的值为一个对象,包含以下属性: - trigger:触发编辑的方,可以是 click、dblclick、manual 中的一个,默认为 click。 - mode:编辑,可以是 cell、row 中的一个,默认为 cell。 - showIcon:是否显示编辑图标,默认为 true。 - showTooltip:是否显示编辑提示,默认为 true。 - autoClear:是否在编辑完成后自动清除已编辑的内容,默认为 true。 4. 在 columns 数组中设置需要编辑的列的属性,其中需要设置 editable 属性为 true,表示该列可被编辑。 5. 在组件中实现 handleEdit、handleSave、handleCancel 等方法,分别用于处理编辑、保存、取消操作。 6. 在 ElTable 组件上添加 scopedSlots,用于自定义编辑的单元格内容。 下面是一个示例代码: ``` <template> <el-table :data="tableData" :columns="tableColumns" :edit-config="editConfig"> <el-table-column label="姓名" prop="name" :editable="true"> <template #default="{row, column, $index}"> <div v-if="!column.editing">{{ row.name }}</div> <div v-else> <el-input v-model="row.name" size="mini"></el-input> </div> </template> </el-table-column> <el-table-column label="年龄" prop="age" :editable="true"> <template #default="{row, column, $index}"> <div v-if="!column.editing">{{ row.age }}</div> <div v-else> <el-input v-model="row.age" size="mini"></el-input> </div> </template> </el-table-column> <el-table-column label="操作"> <template #default="{row, column, $index}"> <el-button v-if="!column.editing" type="primary" size="mini" @click="handleEdit(row)">编辑</el-button> <el-button v-else type="success" size="mini" @click="handleSave(row)">保存</el-button> <el-button v-else type="text" size="mini" @click="handleCancel(row)">取消</el-button> </template> </el-table-column> </el-table> </template> <script lang="ts"> import { defineComponent } from 'vue'; import { ElTable, ElTableColumn, ElButton, ElInput } from 'element-plus'; export default defineComponent({ name: 'EditableTable', data() { return { tableData: [ { name: '张三', age: 18 }, { name: '李四', age: 20 }, { name: '王五', age: 22 } ], tableColumns: [ { label: '姓名', prop: 'name', editable: true }, { label: '年龄', prop: 'age', editable: true }, { label: '操作' } ], editConfig: { trigger: 'click', mode: 'cell', showIcon: true, showTooltip: true, autoClear: true } }; }, components: { ElTable, ElTableColumn, ElButton, ElInput }, methods: { handleEdit(row: any) { this.$refs.table.toggleRowEdit(row); }, handleSave(row: any) { this.$refs.table.toggleRowEdit(row, false); }, handleCancel(row: any) { this.$refs.table.toggleRowEdit(row, false); } } }); </script> ``` 在上述代码中,我们引入了 ElTableElTableColumn、ElButton、ElInput 组件,并在组件中声明了 tableData、tableColumns、editConfig、handleEdit、handleSave、handleCancel 等属性和方法。 在模板中,我们使用 ElTable 组件渲染数据,并设置了可编辑的列和操作列,同时使用 scopedSlots 自定义了编辑的单元格内容。 在脚本中,我们实现了 handleEdit、handleSave、handleCancel 等方法,通过 $refs.table.toggleRowEdit 方法实现编辑的开启、保存、取消等操作。 最终效果为:单击单元格可进行编辑编辑完成后可保存或取消。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 8
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值