antd vue 表格的自动展开行

最新推荐文章于 2025-03-31 10:56:20 发布

原创最新推荐文章于 2025-03-31 10:56:20 发布 · 2.5k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #r语言 #javascript

本文介绍如何在Vue项目中利用Table组件的expandedRowKeys属性来实现动态目录展开的功能。针对默认属性defaultExpandedRowKeys在动态加载时失效的问题，通过使用expandedRowKeys属性并配合自定义方法onExpand，确保在数据动态更新时能正确地展开相应的目录项。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

业务需求是加了二级目录后自动展开该项，

在这里插入图片描述

开始使用的是 table的 defaultExpandedRowKeys这个属性，然后发现问题，这个属性只是在第一次渲染的时候有效，后面动态增加目录是不起作用，研究后转用 expandedRowKeys这个属性

<a-table size="middle" @expand="onExpand" :expandedRowKeys="expandedRowKeys" rowKey="id"
	:columns="columns" :dataSource="dataSource"
</table>




  data() {
    return {
      expandedRowKeys: [],
      }
   },

methods: {
    onExpand(bool, row) {
      if (bool) {
        this.expandedRowKeys = [...this.expandedRowKeys, row.id]
      } else {
        const index = this.expandedRowKeys.findIndex((e) => e === row.id)
        const newArray = [...this.expandedRowKeys]
        newArray.splice(index, 1)
        this.expandedRowKeys = newArray
      }
    },
}