AntDesignVue中Table表格嵌套子表格expandedRowRender插槽用法

在一次项目中使用antdVue表格嵌套子表格时,出现了父表格下子表格数据覆盖的情况,错误情况就不复现了,直接上正确代码

 需求:根据父表格id来获取子表格数据

还是说下错误的情况吧,这个时候可以正常取到该父表格下子表格数据,当点击另一个父表格时点开的所有父表格下的子表格数据都会被新请求回来的子表格数据所覆盖,当时脑子抽了,在接受子表格时使用了data定义了全局变量来接收然后赋给了子表格,这种接收情况下子表格数据是会被覆盖的。

修改接收子表格数据的代码:

使用子表格数据: 

这个地方的作用域插槽返回数据要注意,刚开始以为跟customRender的插槽返回一样 就用的一样,数据正常返回正常赋值,但表格中无数据 看了下文档才发现返回规范,

customRender返回格式:          返回数据条为二项

 expandedRowRender返回格式:    返回数据条为首项 

 因为用到了俩个刚开始没仔细看文档返回格式,还以为一样,属实是自己不细心了

这套下来就能实现父表格下有单独的子表格数据了,

扩展下需求吧 在父表格和子表格中分别操作了子表格的数据 。如删除,修改状态,编辑,新增。

因在上面请求子表格数据时用到的有父表格数据条的id,当父表格操作子表格数据后需要重新请求子表格数据来实现操作后的重新请求数据渲染,就需要拿到父表格的id来重新调用获取子表格数据的函数。

同理当子表格操作时也需要获取父元素数据条的id来重新调用子表格数据函数进行重新渲染。

父表格获取父表格id简单比较简单上面的插槽函数中已经获取了直接拿来传个子表格数据请求的参数就行了,子表格获取时当操作多个子表格数据时父表格id就会乱,可能是我写的有问题,有自己实现方法的可以用自己的实现方法,在这说下我的实现方法

在获取子表格数据时把父表格的当前数据条信息给塞到子表格的一个新属性里

record为传进来的父表格数据条,塞到子表格数据parentObj属性里

当操作某条子表格时把parentObj传入到获取根据父表格id,获取子表格数据的函数里就可以达到获取当前父表格的id,操作各个子表格时就可以做到操作后获取新的数据重新渲染

当各个操作存在组件时,可利用父子来回传储存好的数据,也方便获取父表格id 实现操作后重新渲染的需求

总结下吧:

刚用时不知道怎么获取当前展开项父表格的数据, 在父表格添加事件@expand="函数" 函数就可以获取到当前展开父表格的数据

给子表格赋数据时用的是data定义的全局变量,数据会覆盖,然后就放到了父表格数据的扩展属性上了。

父子表格都操作子表格数据时 因要获取父表格id来获取子表格数据重新渲染 也和上条同理吧把父表格数据放到了子表格的扩展属性上了。

这样操作子表格时就可以方便的拿到当前子表格的父表格数据,也达到了每个父表格下的单独子表格数据。

Vue3结合Ant DesignAntD)构建父嵌套表格通常是为了展示层次结构的数据,比如组织架构、商品分类等。这种设计通过`<template>`组件模板、Vuex状态管理以及AntD提供的Table和Tree组件来实现。 1. 定义数据模型:首先,你需要有一个树形的数据结构,每个节点包含id、name、children等属性。 2. 使用AntD Table:在父组件,使用`<a-table>`渲染一个基础的表格,并通过`<a-tree>`组件生成一个可展开收缩的树形视图,点击节点可以展开显示其表格。 3. 表格嵌套:当用户点击某个节点时,父组件会触发一个事件,传递当前节点的数据到组件。组件内部,通过`<a-table>`展示该节点的详细信息,包括节点的数据。 4. 状态管理:使用Vuex来管理整个应用的状态,特别是表格的数据。当数据更新时,状态会同步到所有依赖它的组件。 5. 事件总线:如果需要跨级通信,你可以使用Vue的Event Bus来传递数据和指令。 ```html <!-- 父组件示例 --> <template> <div> <a-tree ref="tree" :data="treeData" @expand="handleExpand" /> <child-table :table-data.sync="currentNodeData" v-if="isExpanded"></child-table> </div> </template> <script> import ChildTable from './ChildTable.vue'; // ... export default { components: { ChildTable }, data() { return { treeData: [], currentNodeData: {}, isExpanded: false, }; }, methods: { handleExpand(node) { this.isExpanded = node.expanded; if (node.children) { // 更新状态并派发给表 this.$set(this.currentNodeData, 'children', node.children); } }, }, }; </script> ```
评论 11
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值