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

最新推荐文章于 2024-04-05 15:26:59 发布

你眼中的柔情

最新推荐文章于 2024-04-05 15:26:59 发布

阅读量2.6k

点赞数

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

本文链接：https://blog.csdn.net/return_js/article/details/127364465

版权

Ant Design Vue 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

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方法）。