项目场景:
项目中需要使用表格树
问题描述
使用antd-vue的表格组件,其中数据是树的结构时,使用的是表格树,但渲染之后发现父级点击+号展开不了子级行。检查了数据发现也没有问题,该有的字段都有,有children字段。
原因分析:
解决方案:
最后发现原来是我们的表格默认使用index作为每一行的rowKey是使用的index,换成id作为rowKey就行了。
<a-table
bordered
:data-source="dataSource"
:columns="configData.columns"
v-bind="configData.viewConfig"
:rowKey="rowKeyFn"
:rowClassName="(record, index) => (index % 2 === 1 ? 'table-striped' : null)"
>
rowKeyFn: (record: any, index: number) => {
return record.id;
},