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

最新推荐文章于 2024-08-16 19:19:37 发布

原创最新推荐文章于 2024-08-16 19:19:37 发布 · 3.2k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #开发语言 #ecmascript

Ant Design Vue 专栏收录该内容

4 篇文章

订阅专栏

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

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(arr[i].key)
        if (arr[i].children !== null && arr[i].children !== undefined && arr[i].children.length > 0) {
          this.recursiveExpand(arr[i].children, tmp)
        }
      }
      return tmp
    },
      handleOPen(){
      if(this.openStatus){
        this.expandedRowKeys = [];
        this.$emit('update:openStatus', false)
      }else{
        this.recursiveExpand(this.dataSource, this.expandedRowKeys)
        this.$emit('update:openStatus', true)
      }

    },
    onExpand(expandedKeys, record){
      this.expandedKeys = expandedKeys
      let arr = []
      this.recursiveExpand([record], arr)
      if(expandedKeys){
        this.expandedRowKeys = this.expandedRowKeys.concat(arr)
      }else {
        arr.forEach(v => {
          this.expandedRowKeys.splice( this.expandedRowKeys.indexOf(v),1)
        })
      }
    },
    onSelectChange(selectedRowKeys, selectedRows){
      console.log(selectedRowKeys, selectedRows, 'onSelectChange事件')
      this.selectedRowKeys = selectedRowKeys;
      this.selectionRows = selectedRows;
    },

总结：初始化的时候递归所有数据拿到key给expandedRowKeys赋值。收起清空。
点击节点的时候删除或增加expandedRowKeys里面的key数据（onExpand方法）。