irpas技术客

AntDesignVue中Table表格嵌套子表格expandedRowRender插槽用法_嘿,小明_antd vue表格嵌套表格

网络 2823

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

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

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

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

使用子表格数据:?

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

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

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

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

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

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

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

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

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

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

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

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

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

总结下吧:

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

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

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

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


1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,会注明原创字样,如未注明都非原创,如有侵权请联系删除!;3.作者投稿可能会经我们编辑修改或补充;4.本站不提供任何储存功能只提供收集或者投稿人的网盘链接。

标签: #Antd #vue表格嵌套表格