项目需求:默认展开所有树结构;(展开之后点击折叠按钮仍然可以搜索)

ant-design-vue有个bug:table 指定expandedRowKeys后会导致其他的折叠按钮无法展开与回缩,然后我试了defaultExpandedRowKeys也只会在首次加载起作用

expandedRowKeys:展开的行,控制属性 字符串数组
defaultExpandedRowKeys:默认展开的行 字符串数组

两个数据类型都一样,功能相同,唯一区别时一个是默认的只会初始化加载依此,一个是可控的数组内的存值是要展开的行的项(内部填写改行的key)

问题出在哪里呢:正常使用defaultExpandedRowKeys 本行没问题,点击某一行会展开再点会缩起。当添加功能-》一键全部展开缩起的时候问题就来了,因为defaultExpandedRowKeys只有初始化时候才有第二次操作无效

如果项目简单数据量少又不想麻烦可以直接结合定时器加载完数据这样写:
1.关键属性设置:

:expandedRowKeys="defaultExpandedRowKeys"//
 @expand = "onexpand"(注意expand是个事件)
:expandRowByClick="true"//点击行可以展开

2.//初始化加载默认展开所有树节点

    
      setDefaultExpandedKeys(){
        let arr = []
        setTimeout(()=>{//单独设置--展开所有功能
          let data = this.dataSource.data;
          data.length && data.forEach((item) => {
            if (item.children && item.children.length) {
              arr.push(item.id)
              item.children.forEach((item) => {
                arr.push(item.id)
                if (item.children && item.children.length) {
                  arr.push(item.id)
                  item.children.forEach((item) => {
                    arr.push(item.id)
                  })
                }
              })
            }
          })
          this.defaultExpandedRowKeys = arr;
        },200)
      },

3.点击展开方法

 onExpand(expanded, record) {
        if (expanded) {
          // 设置展开窗Key
          this.defaultExpandedRowKeys.push(record.id)
        } else {
          if (this.defaultExpandedRowKeys.length) {
            this.defaultExpandedRowKeys = this.defaultExpandedRowKeys.filter(v => {
              return v != record.id;
            });
          }
        }
      },

最后,给一个按钮可以收起全部数据,方便用户操作:
在这里插入图片描述

  //按钮  设置全部收起
      allUnExpand(){
        setTimeout(()=>{
          this.defaultExpandedRowKeys = []
        },20)
      },

如上所示,就可以实现项目需求了,默认展开所有树结构,同时可以点击折叠按钮可以回缩或者再次展开的功能了。

Logo

前往低代码交流专区

更多推荐