基于antd-vue v1.7.x版本所开发的组织架构树升级版，支持增删改查，滑动加载、远程搜索

背景：在此之前已经实现过单层级的增删改查，现在需求升级成希望无限往下加 ，所以又来更新一下，之前写过这样一篇文章的地址

首先肯定是要针对组织架构树进行二次封装 具体方法可以看这个网站

首先看效果图

树结构

新增下级

编辑当前

删除

首先肯定是要针对框架进行二次封装，写成公共组件,代码里面已经写的很清楚，每一个方法和变量都是什么

template内容

<a-tree
      v-if="showTree"
      :tree-data="treeData"
      :checkedKeys="checkedKeys"
      :expandedKeys="expandedKeys"
      checkable
      :auto-expand-parent="true"
      :defaultExpandAll="true"
      :defaultExpandParent="true"
      :replace-fields="replaceFields"
      :load-data="onLoadData"
      @expand="onExpand"
      @select="onSelect"
      @check="getSelectedKeys"
    >
      <template slot="custom" slot-scope="item">
        <!-- 非新增条目 -->
        <span v-if="!item.isNewItem">
          <!-- 非编辑 -->
          <span
            v-if="!item.isEdit"
            class="node-title"
            :class="emptyActive && item.active ? 'active' : ''"
            >{
   {
    item.title }}
          </span>
          <!-- 编辑 -->
          <div v-else class="add-input-div">
            <input
              v-model="item.title"
              type="text"
              class="editInput"
              autofocus
              :maxLength="12"
              :class="item.empty ? 'red' : ''"
              @focus="item.empty = false"
            />
            <span
              class="tree-save_icon edit-require_icon"
              @click="saveEditNode(item)"
            >
              <a-icon type="check-circle" />
            </span>
            <span
              class="tree-cancle_icon edit-require_icon"
              @click="cancelEdit(item)"
            >
              <a-icon type="close-circle" />
            </span>
          </div>
          <!-- 非编辑状态 -->
          <span v-if="!item.isEdit">
            <!-- 删除按钮 -->
            <a-tooltip
              placement="top"
              v-if="item.parentId != 0 && isShowDeleteIcon"
            >
              <template slot="title">
                <span>删除部门</span>
              </template>
              <span class="icon-wrap" @click="deleteNode(item)">
                <icon name="delete-opt" />
              </span>
            </a-tooltip>
            <!-- 编辑按钮 -->
            <template v-if="item.parentId != 0 && isShowEditIcon">
              <a-tooltip placement="top">
                <template slot="title">
                  <span>编辑部门名称</span>
                </template>
                <span class="icon-wrap" @click="editNode(item, $event)">
                  <icon name="edit-opt" />
                </span>
              </a-tooltip>
            </template>

            <!-- 添加按钮 -->
            <a-tooltip v-if="isShowAddIcon && item.depth < 5" placement="top">
              <template slot="title">
                <span>新增下级部门</span>
              </template>
              <span class="icon-wrap" @click="addNewNode(item)">
                <icon name="plus" />
              </span>
            </a-tooltip>
          </span>
        </span>
        <!-- 新增条目 -->
        <div v-else class="add-input-div">
          <input
            v-model="item.name"
            type="text"
            class="editInput"
            autofocus
            :maxLength="12"
            placeholder="请输入部门名称"
          />
          <span
            class="tree-save_icon edit-require_icon"
            @click="saveAddNode(item)"
          >
            <a-icon