vue tree鼠标移上去显示增删改 antd-design-vue

 			 <a-tree
              :tree-data="treeData"
              @select="onSelect"
              :replace-fields="replaceFied"
              :expandedKeys.sync="defaultSelectedKeys"
              :defaultSelectedKeys="defaultSelectedKeys"
            >
              <template slot="custom" slot-scope="item">
                <div @mouseenter="mouseenter(item)" @mouseleave="mouseleave(item)">
                  <span>{{ item.fVcGroupName }}</span>
                  <div v-show="item.show" style="float: right">
                    <!-- 新增子级 -->
                    <a-icon v-show="!item.isPeople" type="plus" class="iconplus " @click="changeFulevel(item)" />
                    <!-- 编辑同级 -->
                    <a-icon v-show="!item.isPeople" type="edit" class="iconplus" @click="onEdit(item)" />
                    <!-- 删除同级 -->
                    <a-icon v-show="!item.children" type="close" class="iconplus iconLast" @click="onRemove(item)" />
                  </div>
                </div>
              </template>
            </a-tree>

通过变量show来控制

   mouseenter(data) {
      this.$set(data, 'show', true)
    },
    mouseleave(data) {
      this.$set(data, 'show', false)
    },

好多小伙伴希望我代码贴全一点，我的需求后来修改过，a-tree有些功能实在满足不了，所以a-tree改为el-tree去实现的
下面是比较全的代码，需要自己去读代码了，最近很忙，没有时间维护博客，等闲下来再来补充

    <a-row class="mainContent1">
        <el-input placeholder="搜索用户" v-model="filterText1" clearable class="treeInput1"></el-input>
        <a-col :md="23" :xs="24" class="left-wrapper1" ref="left_wrapper">
          <div class="treeSize1">
            <!-- 第一个树 -->
            <el-tree
              ref="usertree"
              :data="treeData"
              :filter-node-method="filterNode1"
              @node-click="onSelect1"
              :props="replaceFied1"
              :default-expanded-keys="defaultSelectedKeys"
              node-key="fPkGroupId"
              :highlight-current="true"
              id="fPkGroupId"
            >
              <span slot-scope="{ node, data }" @click="mouseenter(node, data)" class="treeSpan1">
                <span>
                  <span>{{ node.label }}</span>
                  <span v-if="!data.isPeople && data.fPkGroupId !== '0-0'">({{ data.userCount }})</span>
                  <span v-else-if="data.fPkGroupId == '0-0'">({{ weiCount }})</span>
                </span>
                <div style="float: right;margin-right:20px" class="treeSlot">
                  <!-- 新增同级 -->
                  <a-icon v-show="!item.isPeople" type="plus" class="iconplus iconSame" @click="changeTongji" /> 
                  <!-- 新增子级 -->
                  <i
                    v-show="!data.isPeople && data.fPkGroupId !== '0-0'"
                    class="el-icon-plus iconplus"
                    @click="changeFulevel(data)"
                  />
                  <!-- 编辑同级 -->
                  <i v-show="!data.isPeople && data.fPkGroupId !== '0-0'" class="el-icon-edit" @click="onEdit(data)" />
                  <el-popover
                    ref="dcPopover"
                    placement="right"
                    popper-class="popverClass"
                    width="350"
                    trigger="hover"
                    offset="390"
                    :popper-options="{ boundariesElement: 'body' }"
                  >
                    <div class="headTitle">选择分组</div>
                    <el-input
                      placeholder="搜索分组"
                      v-model="filterText2"
                      clearable
                      @input="filterChange($event, data.fPkGroupId)"
                    >
                    </el-input>
                    <a-row class="treeRow">
                      <a-col :md="23" :xs="24" class="left-wrapper2">
                        <div class="treeSize2">
                          <!-- 第二个树  -->
                          <vue-scroll :ops="ops">
                            <el-tree
                              :ref="'grouptree' + data.fPkGroupId"
                              :data="GroupTreedata"
                              :filter-node-method="filterNode2"
                              @node-click="onSelect2"
                              node-key="fPkGroupId"
                              :props="replaceFied2"
                            >
                            </el-tree>
                          </vue-scroll>
                        </div>
                      </a-col>
                    </a-row>
               
                    <span
                      v-show="data.isPeople && !data.children"
                      slot="reference"
                      class="treeUesrmove"
                      @mouseenter="openDialog(data)"
                      @mouseleave="closeDialog(data)"
                      >移动</span
                    >
                  </el-popover>
                  <i
                    v-show="!data.isPeople && !data.children"
                    class="el-icon-close iconplus iconLast"
                    @click="onRemove(data)"
                  />
                </div>
              </span>
            </el-tree>
          </div>
          <div style="width:100%">
            <a-spin :spinning="inputSpining" class="inputSpin">
              <a-input
                placeholder="新建分组标签"
                class="left_content_input"
                v-model="createPutvalue"
                id="inputName"
                autocomplete="off"
              >           
                <a-icon slot="addonAfter" type="check" @click="$refs.moveTreeuserRef.add($event)" />
              </a-input>
            </a-spin>
          </div>
        </a-col>
      </a-row>

没有仔细筛选，全都贴出来了

  data() {
    return {
      status,
      echart: null,
      cacheId: [], //缓存图表数据
      curUser: [], // 当前用户列表
      curGroup: [],
      echart: null,
      visible: false, //配置用户树弹窗
      editVisible: false,
      addfuVisible: false, //新增子级弹窗
      labelFlag: true, //切换新标签按钮和输入框
      fulevelFlag: false, //切换新增子级图标和输入框
      tongjiFlag: false, //切换新增同级图标和输入框
      fInParentId: '', //子级数据父id
      loading: false,
      createPutvalue: '', //创建新标签input值,保存新标签接口必传字段
      addPutvalue: '', //同级输入框
      addfuPutvalue: '', //子级输入框
      userName: '', //右击x轴显示用户名
      userNameFlag: true,
      fInUserId: '', //分组接口用户id
      fPkGroupId: '', //分组接口分组id
      fPkGroupId11: '', //分组接口分组id
      treeData: [],
      GroupTreedata: [],
      dataList: [],
      xData: [],
      xDataid: '',
      newXdata: [],
      subMenuList: [],
      defaultSelectedKeys: [],
      replaceFied1: { children: 'children', label: 'fVcGroupName' },
      replaceFied2: { children: 'children', label: 'fVcGroupName' },
      inputSpining: false,
      notGroupObj: {},
      notGroupList: [],
      showMove: false,
      popoverVisible: false,
      searchValue: '',
      filterText1: '',
      filterText2: '',
      curFilterKey: '',
      weiCount: 0,
      alabelId: '',
      treeVisible: false,
      creatLabelId: '', //创建的时候返回的分组id
      echartsFlag: 0,
      ops: {
        vuescroll: {
          mode: 'native', //模式:pc natice 移动端是slice
          sizeStrategy: 'percent', //父元素是否是固定的是就percent 
          不是就是number 填一个数值
          detectResize: true //内容是否根据页面调整
        },
        scrollPanel: {
          scrollingY: true
        },
        rail: {
          background: '#01a99a',
          opacity: 0,
          size: '6px',
          gutterOfSide: '2px',
          keepShow: true
        },
        bar: {
          background: '#bcd0f5',
          onlyShowBarOnScroll: false,
          keepShow: true,
          opacity: 0.8,
          size: '3px',
          'overflow-x': 'hidden'
        }
      },
      timeSpining:false,

    }
  },

watch: {
    // watch监听不一样，usertree和grouptree
    filterText1(val) {
      this.$refs.usertree.filter(val)
    },
    filterText2(val) {
      setTimeout(() => {
        this.$refs['grouptree' + this.curFilterKey].filter(val)
      }, 200)
    }
  },

 // 分组树输入框事件
    filterChange(e, key) {
      this.curFilterKey = key
    },
    filterNode1(value, data) {
      if (!value) return true
      return data.fVcGroupName.indexOf(value) !== -1
    },
    filterNode2(value, data) {
      if (!value) return true
      return data.fVcGroupName.indexOf(value) !== -1
    },
    // 查询分类列表--树数据
    getClassfiyList() {
      let that = this
      getgroupUserlist().then(async res => {
        // console.log(res,'查询分类列表--树数据');
        if (res && res.code == 0) {
          const scopedSlots = {
            title: 'custom'
          }
          let notGroupObj = {
            fInParentId: '',
            fVcGroupName: '未分组',
            isPeople: false,
            fPkGroupId: '0-0',
            fVcParentGroupCode: null,
            fVcParentName: null,
            fVcGroupCode: '00',
            scopedSlots: scopedSlots,
            children: []
          }
          this.notGroupObj = notGroupObj
          await this.dealnotGroupUser()
          res.data.groupList.unshift(notGroupObj)

          let arr1 = res.data.groupList

          let arr2 = res.data.userList
          arr1.forEach(item => {
            item.scopedSlots = scopedSlots
            item.isPeople = false
            item.id = item.fPkGroupId
          })
          arr2.forEach(item => {
            item.id = item.fPkGroupId
            item.fInParentId = item.fPkGroupId
            item.fPkGroupId = item.fInUserId
            item.fVcGroupName = item.fVcUserName
            item.scopedSlots = scopedSlots
            item.isPeople = true
          })
          this.treeData = this.dealTreedata([...arr1, ...arr2])
          if (that.$refs.usertree) {
            that.$nextTick(() => {
              if (that.treeData && that.treeData.length > 0) {
                console.log(that.defaultSelectedKeys, '设置that.defaultSelectedKeys')
                that.$refs.usertree.setCurrentKey(that.defaultSelectedKeys[0])
              }
              setTimeout(() => {
                let treeSize1 = $('.treeSize1')
                let parentHeight = $('.treeSize1').height() - 80
                let dom = $('.is-current')
                 console.log(treeSize1,parentHeight,dom,'cashanalysis height');

                if (dom.position().top >= parentHeight) {
                  treeSize1.animate(
                    {
                      scrollTop: dom.position().top
                    },
                    500
                  )
                }
              })
            })
          }
        }
      })
    },
    // 查询分类列表--树数据
    getClassfiyList2() {
      getgroupUserlist().then(res => {
        if (res && res.code == 0) {
          let arr1 = res.data.groupList
          // let arr2 = res.data.userList
          arr1.forEach(item => {
            // item.scopedSlots = scopedSlots
            item.isPeople = false
          })
          arr1.unshift({
            fInParentId: '',
            fVcGroupName: '未分组',
            isPeople: false,
            fPkGroupId: '0-0'
          })
          this.GroupTreedata = this.dealTreedata([...arr1])
        }
      })
    },
    async dealnotGroupUser() {
      await weiflUser().then(res => {
        res.rows.forEach(m => {
          m.isPeople = true
          m.fPkGroupId = m.fInUserId
          m.fVcGroupName = m.fVcUserName
          // this.notGroupList.push(m)
          this.notGroupObj.children.push(m)
        })
        this.weiCount = this.notGroupObj.children.length
        // console.log(this.weiCount,'this.weiCount');
      })
    },
    dealTreedata(data) {
      let result = []
      if (!Array.isArray(data)) {
        return result
      }
      let map = {}
      data.forEach(item => {
        map[item.fPkGroupId] = item
      })
      data.forEach(item => {
        let parent = map[item.fInParentId]
        if (parent) {
          ;(parent.children || (parent.children = [])).push(item)
        } else {
          result.push(item)
        }
      })
      return result
    },
    // 用户树选中事件
    onSelect1(key, event) {
      // console.log(key, event, '金额分组树1')

      this.fPkGroupId = key.fPkGroupId
      // key.id = key.fPkGroupId
      // console.log(key, event)
    },
    // 分组树选择事件
    onSelect2(key, event) {
      console.log(key, event, '金额分组树2')
      this.fPkGroupId2 = key.fPkGroupId
      this.fVcGroupName = key.fVcGroupName
      this.defaultSelectedKeys = [key.fPkGroupId]
      if (this.fPkGroupId2 !== '0-0') {
        setUserbelongs({ fInUserId: this.fInUserId, fPkGroupId: this.fPkGroupId2 })
          .then(res => {
            if (res && res.code == 0) {
              this.$message.success('添加成功')
              // that.filterText = ''
              // that.visible = false

              this.getClassfiyList()
              this.getClassfiyList2()
              if (this.cacheId.length) {
                this.dealxdata(this.cacheId[this.cacheId.length - 1])
                this.initData()
              } else {
                this.initData()
              }
            }
          })
          .catch(err => {
            this.$message.error(err)
            console.log(err)
          })
      } else {
        cancelUser({ id: this.fPkRelationId })
          .then(res => {
            if (res && res.code == 0) {
              this.$message.success('添加成功')

              this.getClassfiyList()
              if (this.cacheId.length) {
                this.dealxdata(this.cacheId[this.cacheId.length - 1])
              } else {
                this.initData()
              }
            }
          })
          .catch(err => {
            this.$message.error(err)
            console.log(err)
          })
      }
      this.filterText1 = ''
      this.filterText2 = ''
      this.visible = true
    },
    mouseenter(node, data) {
      this.$set(data, 'show', true)
    },
    mouseleave(data) {
      this.$set(data, 'show', false)
    },