基于antd-vue 的 tree进行二次封装

最近接了一个新项目，产品要求用tree树结构展示数据，emmmm，关键是还要在tree上进行新增、编辑和删除

那么原有的tree肯定不满足这需求，所以得进行二次封装了

数据结构

因为我这两个接口组装的，所以做了数据处理，如果是一个接口返回那更好，只要循环遍历新增我们需要的参数即可
// 部门树

   leftTree() {
   
      let treeData = [];
      getTeamInfo().then((res) => {
   
        if (res.errorCode == "00000") {
   
          let jsonData = {
   
            id: 1,
            key: 1,
            isEdit: false, // 是否处于编辑状态
            isNewItem: false, // 该节点是否是新增节点
            isDelete: false,
            isShowDelete: false, //是否显示删除按钮
            isShowEdit: false, //是否展示编辑按钮
            isShowAdd: true, //是否展示新增按钮
            title: "斗象科技",
            depth: 1, // 该节点的层级
            scopedSlots: {
    title: "custom" }, // 自定义组件需要绑定
            children: [],
          };
          jsonData.title = res.data.teamName;
          jsonData.id = res.data.id;
          jsonData.key = res.data.id;
          treeData.push(jsonData);
          this.getOrganizationList(treeData);
        }
      });
    },

完整代码

<template>
  <div>
    <a-tree
      v-if="treeData.length > 0"
      :tree-data="treeData"
      block-node
      default-expand-all
    >
      <icon slot="switcherIcon" name="down"></icon>
      <template slot="custom" slot-scope="item">
        <!-- 如果是新增-->
        <span v-if="item.isNewItem">
          <input
            type="text"
            class="editInput"
            :maxlength="30"
            v-model="item.name"
            placeholder="请输入部门名称"
          />
          <span
            class="tree-cancle_icon edit-require_icon"
            @click="cancelAddFun(item)"
          >
            <a-icon type="close-circle" />
          </span>
          <span
            class="tree-save_icon edit-require_icon"
            @click="submitAddFun(item)"
          >
            <a-icon type="check-circle" />
          </span>
        </span>
        <!-- 不是新增 -->
        <div v-else>
          <!-- 编辑时展示输入框 -->
          <div v-if="item.isEdit">
            <input
              type="text"
              v-model="item.title"
              :maxlength="30"
              class="editInput"
            /><