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

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

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

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

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

使用子表格数据：

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

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

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

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

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

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

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

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

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

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

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

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

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

总结下吧：

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

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

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

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

AntDesignVue中Table表格嵌套子表格expandedRowRender插槽用法相关推荐

【EasyUI DataGrid DetailView】表格嵌套子表格
一.功能描述在做项目的时候,要求能够对某一行的数据进行折叠显示,用来查看该行的详细信息.拟通过采用easyui的detailview创建表格分组,大致的效果图如下所示: 二.使用方法本篇博客承接以 ...
树形数据展示 - 嵌套子表格
一.目标样式父表格嵌套子表格,子表格默认折叠,点击父表格左侧加号可以展开父表格显示对应的子表格,展示每行数据更详细的信息目标效果二.问题样式 (一)问题说明父表格展开后,子表格展示成功,但是子 ...
antd react table 嵌套子表格例子
antd react table 嵌套子表格例子 import { Button, TableColumnsType } from 'antd'; import { Badge, Dropdown, ...
怎么才能让Antd中的嵌套子表格渲染不一样的内容
目录一.子表格与父表格的数据存储在一起方式一:Function(record, index, indent, expanded):VNode 方式二:#expandedRowRender=&quo ...
antd 嵌套子表格
antdsign Table-嵌套子表格解决通过ajax请求的数据嵌套子表格展开显示时,无法独立显示. 最近有写一个嵌套子表格的项目,主要是根据表格行的信息获取该行下级的详细信息并最为表格输出展示. ...
Vue + ant design 实现嵌套子表格
Table - 嵌套子表格一.效果展示二.代码实现一.效果展示功能1:添加主表格一行功能2:添加某个子表格一行功能3:子表格数据的异步加载二.代码实现 <template>& ...
oracle模糊查询中的regexp_like嵌套子查询用法
oracle模糊查询中的regexp_like嵌套子查询用法 regexp_like一般用于模糊查询某一列时包含多个查询条件需求1:在用户表中查询出账号包含650000和230000的用户. sel ...
ant-design嵌套子表格实现每次只展开一个子表格（点击新的子表格收起原展开的子表格）
又遇到问题,记录一下吧,希望给同踩坑的小白一些帮助首先功能需求:点击新的子表格收起原展开的子表格解决问题的关键点:重新set expandedRowKeys的值这个解决问题的点大家都能想到,主 ...
HTML——表格、表格嵌套、表格布局
表格 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8& ...

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

AntDesignVue中Table表格嵌套子表格expandedRowRender插槽用法相关推荐

最新文章

热门文章