a-tree

1. 树的编辑和删除（插槽实现）

<a-tree>标签中加上插槽，插槽中的内容包括树节点原本要展示的内容以及自定义的内容。

给treeData数据的每个层级加上'scopedSlots', { title: 'custom' }即可。

<a-tree
            v-if="treeData.length>0"
            :defaultExpandAll="true"
            :selected-keys="selectedKeys"
            :tree-data="treeData"
            :replaceFields="{children:'children', title:'categoryName', key:'id',value:'id' }"
            @expand="onExpand"
            @select="onSelect"
          >
            //插槽
            <template slot="custom" slot-scope="item">
              <div
                @mouseenter="mouseenter(item)"
                @mouseleave="mouseleave(item)"
                style="display:flex;justify-content:space-between;align-items:center;width:100%"
              >
                <span :title="item.categoryName" style="overflow: hidden;text-overflow: ellipsis;white-space: nowrap;">{{ item.categoryName }}</span>
                <span
                  v-if="currentId==item.id"
                  style="display:flex;justify-content:space-between;align-items:center;"
                  v-has="'admin:true'"
                >
                  <a-tooltip placement="top">
                    <template #title>
                      <span>编辑</span>
                    </template>
                    <div style="margin-right:5px">
                      <a-icon
                        type="edit"
                        @click.stop="handleEdit(item)"
                        :style="{ fontSize: '15px' }"
                      />
                    </div>
                  </a-tooltip>
                  <a-tooltip placement="top">
                    <template #title>
                      <span>删除</span>
                    </template>
                    <div>
                      <a-icon
                        type="delete"
                        @click.stop="handleDelete(item)"
                        :style="{ fontSize: '15px' }"
                      />
                    </div>
                  </a-tooltip>
                </span>
              </div>
            </template>
          </a-tree>

//处理数据
addAttrToTree(jsonData) {
      for (let i = 0; i < jsonData.length; i++) {
        this.$set(jsonData[i], 'scopedSlots', { title: 'custom' })
        if (jsonData[i].hasOwnProperty('children')) {
          this.addAttrToTree(jsonData[i].children)
        }
      }
      return jsonData
    },

鼠标悬浮显示编辑和删除图标：通过鼠标移入和移除事件，鼠标移入时，拿到当前节点的id，移除时id置为空。在插槽中判断currentId与该节点的值是否相等，相等则v-if显示。

mouseenter(item) {
      this.currentId = item.id
    },
mouseleave(item) {
      this.currentId = ''
    },

2. 树节点内容超出用...显示

  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;

3. 鼠标悬浮在节点上，显示节点完整内容

给span标签加上title属性即可。