Ant Design Vue 2.2.8 Tree 树形控件 手风琴实现

背景

项目中需要使用Antd中的树形控件，来实现创建角色，由于数据比较多，用户一级一级点开就会把Modal对话框拉的很长，所以就需要手风琴模式来限制展开层级。

但我发现Ant Design Vue 2.2.8版本中，Tree组件文档并没有实现手风琴的实现案例🥲（在3之后，提供了手风琴实现案例），于是我就把实现的方法记录一下。

约定数据结构

我和我的后端小伙伴共同约定和维护这份数据结构，如字段、id数值范围等。

例如：最外层数据的id取值范围在[1,100)，第二层在[100,1000)，以此类推。

手风琴实现

参数介绍

• checkedKeys(v-model)：选中复选框的树节点
• expand：事件 - 展开/收起节点时触发
• keys：事件参数 - 已展开项的key(字段替换为id)所组成的数组,后展开的key会push进keys数组

主要代码（Vue3）

简单实现了下，没有做的很细处理和封装。

  <!-- template -->
  <Tree
      checkable
      :replace-fields="replaceFields"
      :tree-data="menuTreeselect"
      v-model:expandedKeys="expandedKeys"
      v-model:selectedKeys="selectedKeys"
      v-model:checkedKeys="checkedKeys"
      @expand="handleExpand"
  >
  </Tree>

  //script
  //已展开项
  let expandedKeys = ref([]);
  //已选中项
  let checkedKeys = ref([]);

  // 树 字段替换
  const replaceFields = {
    //   children: 'child',
    title: 'name',
    key: 'id',
  };

  //树 手风琴
  const handleExpand = (keys, { expanded, node }) => {
    // console.log('keys', keys); 
    let newArr = [];

    let Count = keys.reduce((prev, cur, index, arr) => {
      if (cur < 100) {
        prev++;
      }
      return prev;
    }, 0);

    // console.log('Count', Count);

    let Count100 = keys.reduce((prev, cur, index, arr) => {
      if (cur >= 100) {
        prev++;
      }
      return prev;
    }, 0);

    // console.log('Count100', Count100);

    if (Count > 1) {
      let ind = keys.findIndex((v, i) => {
        return v < 100;
      });

      newArr = keys.filter((v, i) => {
        return i !== ind;
      });

      // console.log('newArr', newArr);

      expandedKeys.value = newArr;
    } else if (Count100 > 1) {
      let ind2 = keys.findIndex((v, i) => {
        return v >= 100;
      });

      newArr = keys.filter((v, i) => {
        return i !== ind2;
      });

      // console.log('newArr', newArr);

      expandedKeys.value = newArr;
    }
  };