Ant Design of Vue的树形控件Tree的使用及说明

:replaceFields="{ title: 'buildingName', key: 'buildingId' }"

const treeData = [
  {
    title: '0-0',
    key: '0-0',
    children: [
      {
        title: '0-0-0',
        key: '0-0-0',
        children: [
          { title: '0-0-0-0', key: '0-0-0-0' },
          { title: '0-0-0-1', key: '0-0-0-1' },
          { title: '0-0-0-2', key: '0-0-0-2' },
        ],
      },
      {
        title: '0-0-1',
        key: '0-0-1',
        children: [
          { title: '0-0-1-0', key: '0-0-1-0' },
          { title: '0-0-1-1', key: '0-0-1-1' },
          { title: '0-0-1-2', key: '0-0-1-2' },
        ],
      },
    ],
  },
];

:load-data="onLoadData"

    // 获取部门树
    getTree() {
      classTree()
        .then((res) => {
          if (res.data.code == '200') {
            let data = res.data.result.treeobject;
            if (!this.defaultSelectedkeys.length) {
              this.defaultSelectedkeys.push(data.buildingId);
            }
            let obj = {
              title: data.buildingName,
              key: data.buildingId,
            };
            this.treeData.push(obj);
          } else {
            this.loading = false;
          }
        })
        .catch(() => {
          this.loading = false;
        });
    },
    //异步加载树形数据
    onLoadData(treenode) {
      return new Promise((resolve) => {
        if (treeNode.dataRef.children) {
          resolve();
          return;
        }
        const { current, pageSize } = this.pagination;
        let child = [];
        childList(current, pageSize, treeNode.dataRef.key).then((res) => {
          if (res.data.code == '200') {
            res.data.result.listobject.forEach((item, index) => {
              let obj = {};
              obj = {
                title: item.buildingName,
                key: item.buildingId,
              };
              child.push(obj);
            });
            treeNode.dataRef.children = child;
            this.treeData = [...this.treeData];
            resolve();
          }
        });
      });
    },

 // 树形结构选中项
    _select(e, node) {
      if (!e.length) {
        return;
      }
      //第二层
      if (e[0].includes('B')) {
      	//保存id，方便找到需要添加子树的位置
        this.a = e[0].substring(1);
        let data1 = {
          curPage: current,
          pageSize: 1000,
          orderDirection,
          orderFieldName,
          buildingId: e[0].substring(1),
        };
        floorList(data1).then((res) => {
          if (res.data.code == '200') {
            let children1 = [];
            res.data.result.pageobject.content.forEach((item1, index1) => {
            //构造数据时注意整棵树的title、key一旦被替换就只能渲染替换后字段的数据
              let obj = {
                buildingName: item1.floorName,
                buildingId: item1.floorCode,
              };
              this.$set(children1, item1.floorId, obj);
            });
            this.$set(this.treeData2[this.a], 'children', children1);
          }
        });
        //第三层
      } else if (e[0].includes('f')) {
        this.b = e[0].substring(1);
        let data2 = {
          curPage: current,
          pageSize: 1000,
          orderDirection,
          orderFieldName,
          floorId: e[0].substring(1),
        };
        roomList(data2).then((res) => {
          if (res.data.code == '200') {
            let children2 = [];
            res.data.result.pageobject.content.forEach((item2, index2) => {
              let obj = {
                buildingName: item2.roomName,
                buildingId: item2.roomCode,
              };
              children2.push(obj);
            });
            this.$set(this.treeData2[this.a].children[this.b], 'children', children2);
          }
        });
        //第四层（最后一层的叶子节点，整棵树构造完成，我们根据它的id调取展示数据，用表格展示）
      } else if (e[0].includes('r')) {
        let data3 = {
          curPage: current,
          pageSize: 1000,
          orderDirection,
          orderFieldName,
          roomId: e[0].substring(1),
        };
        bedList(data3).then((res) => {
          if (res.data.code =='200') {
            this.tableData = res.data.result.pageobject.content;
          }
        });
      }
    },

<a-icon slot="switcherIcon" type="home" theme="filled" />

<a-icon slot="smile" type="smile-o" />

treeData = [
  {
    title: 'parent 1',
    key: '0-0',
    slots: {
      icon: 'smile',
    },
    children: [
      { title: 'leaf', key: '0-0-0', slots: { icon: 'meh' } },
      { title: 'leaf', key: '0-0-1', scopedSlots: { icon: 'custom' } },
    ],
  },
];

// 展开树形结构
    onExpand(expandedKeys) {
    //expandedKeys是被展开节点的key组成的数组
      let arr = expandedKeys.splice(-1);
      this.expandedKeys = arr;
    },

<template>
  <a-directory-tree multiple default-expand-all @select="onSelect" @expand="onExpand">
    <a-tree-node key="0-0" title="parent 0">
      <a-tree-node key="0-0-0" title="leaf 0-0" is-leaf />
      <a-tree-node key="0-0-1" title="leaf 0-1" is-leaf />
    </a-tree-node>
    <a-tree-node key="0-1" title="parent 1">
      <a-tree-node key="0-1-0" title="leaf 1-0" is-leaf />
      <a-tree-node key="0-1-1" title="leaf 1-1" is-leaf />
    </a-tree-node>
  </a-directory-tree>
</template>
<script>
export default {
  methods: {
    onSelect(keys, event) {
      console.log('Trigger Select', keys, event);
    },
    onExpand() {
      console.log('Trigger Expand');
    },
  },
};
</script>

 <a-tree show-line class="draggable-tree" :load-data="onLoadData" :tree-data="treeData" :defaultSelectedKeys="defaultSelectedkeys" @select="_select">
 //把key作为treeKey
     <template #title="{ key: treeKey, title }">
        <a-dropdown :trigger="['contextmenu']">
           <span>{{ title }}</span>
           <template #overlay>
              <a-menu @click="({ key: menuKey }) => onContextMenuClick(treeKey, menuKey)">
                 <a-menu-item key="1">添加</a-menu-item>
                 <a-menu-item key="2">修改</a-menu-item>
                 <a-menu-item key="3">删除</a-menu-item>
               </a-menu>
            </template>
         </a-dropdown>
     </template>
 </a-tree>
    //右键菜单
    onContextMenuClick(treeKey, menuKey) {
    //treeKey是被唤起右键菜单的树节点的key，menuKey被点击的右键菜单的key
      this.treeKey = treeKey;
      this.menuKey = menuKey;
      if (menuKey == '1') {
        this.title = '添加组织';
      } else if (menuKey == '2') {
        this.title = '修改组织';
      } else {
        this.title = '删除组织';
      }
    },

    // 响应右键点击
    onrightClick({ node }) {
      this.nodeobj = node;
    },