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="repla