antdvue table 树形数据一键展开一键收起

你眼中的柔情

于 2022-10-17 15:26:58 发布

阅读量3.1k

点赞数

CC 4.0 BY-SA版权

分类专栏： Ant Design Vue 文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.youkuaiyun.com/return_js/article/details/127364465

本文介绍了如何在antdvue的Table组件中实现树形数据的一键展开和一键收起功能，通过递归方法和展开收起事件来控制节点的显示状态。在初始化时，通过遍历所有数据获取key设置expandedRowKeys。在节点点击事件onExpand中，动态管理expandedRowKeys的key，实现节点的展开与收起。

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

antd 表格的一键展开以及节点的展开收起功能

在这里插入图片描述
html

 <a-table
      style="margin-top: 20px"
      :columns="columns"
      :data-source="dataSource"
      bordered
      rowKey="key"
      :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
      :expandedRowKeys="expandedRowKeys"
      @expand="onExpand"
      :expanded-keys="expandedKeys"
    >
      <span slot="action" slot-scope="text, record, index">
        <a @click="reloadFn(record)">重置</a>
      </span>
    </a-table>

      columns:[],
	  dataSource:[],
	  expandedRowKeys: [],
      selectedRowKeys: [],
      selectionRows: [],
      expandedKeys: [],

递归方法和展开收起事件

 recursiveExpand(arr, tmp) {
      for (let i = 0; i < arr.length; i++) {
        tmp.push(a

最低0.47元/天解锁文章

200万优质内容无限畅学

antdvue table 树形数据一键展开一键收起

antd 表格的一键展开 以及 节点的展开收起功能

antd 表格的一键展开以及节点的展开收起功能