一、需求
需求:若主数据下存在子数据,则展开嵌套表格展示子数据,若无子数据则不可展开
二、 实现思路
expandedRowKeys | 展开的行,控制属性 | string[] 或 number[] |
expand | 点击展开图标时触发 | Function(expanded, record) |
childrenColumnName | 指定树形结构的列名 | string 默认值为children |
expandedRowKeys 用于收集你所展开行的 ID 或 其他属性
expand 接受两个参数,expanded(当前点击行展开状态 True | False )
record (当前点击行的数据)
childrenColumnName 用于指定子数据的字段 (本次实现中为用到,有兴趣的小伙伴可自行到官方文档查看)
思路:
1. 展开嵌套列表:判断当前行是否存在子数据,若无子数据则可以提示无子数据,若存在子数据且 expandedRowKeys 属性中不存在当前行数据ID,则表示当前行未展开,固将当前行数据ID添加到 expandedRowKeys 属性中。
2. 收起嵌套列表:判断 expandedRowKeys 属性中是否存当前行ID,若不存在则走展开嵌套列表逻辑,若存在则获取到当前行ID在 expandedRowKeys 属性中的索引位置并删除。
三、实现代码
<at-table ref="table" rowKey="id" :data="initReceivingDetailTableData" :columns="SKUContainerList" :alert="false"
:rowSelection="rowSelection" :search="false" :showPagination="true" bordered :defaultExpandAllRows="true"
:expandIconAsCell='false' :expandedRowKeys="expandedRowKeys" @expand="handleExpand"
>
<!-- 嵌套Table -->
<at-table slot="expandedRowRender" slot-scope="record" :columns="SKUContainerList"
:data-source="record.listInventorySlaveDTOS" :rowKey="(record) => record.id" :pagination="false">
</at-table>
</at-table>
handleExpand (_, record) {
const innerData = record.listInventorySlaveDTOS.length
const showDataIndex = this.expandedRowKeys.indexOf(record.id)
if (showDataIndex !== -1) {
this.expandedRowKeys.splice(showDataIndex, 1)
return
}
if (innerData && showDataIndex === -1) {
this.expandedRowKeys.push(record.id)
} else {
this.$message.error('当前数据无子数据')
}
},