应用场景
使用Ant Design Vue框架开发前端,要求树状table表格默认全部展开。使用defaultExpandAllRows属性设置为true时不生效,使用expandedRowKeys实现了该目标,但是发现table表格的图标失效了。点击图标无法折叠或展开行。
解决办法
使用table组件的 @expand 事件,实现onExpand方法。在onExpand方法中进行控制,即可解决点击图标失效的问题
代码样例
<template>
<a-table :row-selection="{
selectedRowKeys: selectedRowKeys,
onChange: onSelectChange,
}" :columns="tableColumns" :data-source="treeData" :customRow="customRow" :row-key="(record) => record.uuid"
:pagination="false"
:scroll="{ x: 1600 }" :expandedRowKeys="defaultExpandedRowKeys" @expand="onExpand" style="min-height: 800px;">
</a-table>
</template>
const onExpand = (expanded: any, record: any) => {
// console.log('extend:' + expanded)
// console.log('record: ' + JSON.stringify(record))
if (expanded) {
// 设置展开窗Key,代表展开操作
defaultExpandedRowKeys.value.push(record.uuid)
} else {
// 代表折叠操作
if (defaultExpandedRowKeys.value.length) {
defaultExpandedRowKeys.value = defaultExpandedRowKeys.value.filter(v => {
return v !== record.uuid
})
}
}
}