ant design vue tree添加自定义新增、修改、删除节点图标

效果图

当前选择节点后新增自定义图标，取消选中默认没有自定义图标

核心代码处

 // nodeDate数据结构如下
 // [
 //   {
 //     codeLine: '电化厂new',
 //     id: '111',
 //     name: '电化厂new',
 //     parentId: '',
 //     children: [
 //       {
 //         codeLine: '电化厂new-test',
 //         id: '320214938155151360',
 //         name: 'test',
 //         parentId: '111',
 //         children: [],
 //       },
 //     ],
 //   },
 // ]

// 节点点击触发事件
async onSelect(params, e) {
  if (this.filterResource) {
    this.$set(this.filterResource, 'scopedSlots', {})
  }
  // 节点选中或取消选中
  if (e.selected) {
  // 此处codeLine为业务需要，判断是否是四级节点，添加相应的自定义icon
    let codeLine = e.selectedNodes[0].data.props.codeLine
    let arr = codeLine.split('-')
    // 树节点中查找到对应的当前节点，添加scopedSlots属性
    this.filterResource = parseArray(this.nodeData, 'id', params[0])
    let iconStr
    if (arr.length < 4) {
      iconStr = 'plus'
    } else {
      iconStr = 'edit'
    }
    this.$set(this.filterResource, 'scopedSlots', { icon: iconStr })
    this.selectedKeys = params
    this.codeLine = codeLine
  } else {
    this.selectedKeys = null
    this.codeLine = ''
  }
},

完整代码展示

<template>
  <div class="wrap">
    <a-tree
      ref="nodeTree"
      :tree-data="nodeData"
      :selectedKeys="selectedKeys"
      :replace-fields="replaceFields"
      default-expand-all
      show-icon
      @select="onSelect"
    >
    <!--   新增、修改、删除图标   -->
      <template slot="plus" slot-scope="record">
        <a-icon
          type="plus"
          class="plusType"
          style="padding-left: 10px"
          @click.stop="nodeHandle(record, true)"
        ></a-icon>
        <a-icon
          type="edit"
          class="editType"
          style="padding-left: 10px"
          @click.stop="nodeHandle(record, false)"
        ></a-icon>
        <a-icon
          type="delete"
          class="deleteType"
          style="padding-left: 10px"
          @click.stop="nodeDel(record)"
        ></a-icon>
      </template>
      <!--   修改、删除图标   -->
      <template slot="edit" slot-scope="record">
        <a-icon
          type="edit"
          class="editType"
          style="padding-left: 10px"
          @click.stop="nodeHandle(record, false)"
        ></a-icon>
        <a-icon
          type="delete"
          class="deleteType"
          style="padding-left: 10px"
          @click.stop="nodeDel(record)"
        ></a-icon>
      </template>
    </a-tree>
  </div>
</template>

<script>
import {
  DelLimsConfigNodeData,
  GetLimsConfigNodeData,
} from '@/services/LIMSApis/nodeConfig'
// 数组对象中查找符合目标的对象
const parseArray = function (objArray, key, value) {
  for (let i in objArray) {
    let element = objArray[i]
    if (typeof element === 'object') {
      let result = parseArray(element, key, value)
      if (result) return result
    } else {
      if (i === key) {
        if (element === value) return objArray
      }
    }
  }
}

export default {
  name: 'index1',
  data() {
    return {
      replaceFields: {
        title: 'name',
        key: 'id',
      },
      nodeData: [],
      codeLine: '',
      selectedKeys: null,
      filterResource: null,
    }
  },
  mounted() {
    this.GetLimsConfigNode()
  },
  methods: {
    // 获取全部节点树
    async GetLimsConfigNode() {
      this.nodeData = await GetLimsConfigNodeData()
    },
    // 新增、修改节点操作，此处为打开新增修改界面，调用实际后端接口进行节点的处理操作
    async nodeHandle(record, isAdd) {
      // this.visible = true
      // this.$nextTick(() => {
      //   this.$refs.addOrUpdate.init(record, isAdd, this.nodeData)
      // })
    },
    nodeDel(record) {
      // this.$confirm({
      //   title: `您确定要删除该节点：${record.name}?`,
      //   okText: '删除',
      //   cancelText: '取消',
      //   onOk: async () => {
      //     await DelLimsConfigNodeData({ id: record.id })
      //     this.$message.success('删除成功')
      //     // 刷新当前节点
      //     await this.GetLimsConfigNode()
      //     this.selectedKeys = null
      //     this.codeLine = ''
      //   },
      // })
    },
    async onSelect(params, e) {
      if (this.filterResource) {
        this.$set(this.filterResource, 'scopedSlots', {})
      }
      if (e.selected) {
        let codeLine = e.selectedNodes[0].data.props.codeLine
        let arr = codeLine.split('-')
        this.filterResource = parseArray(this.nodeData, 'id', params[0])
        let iconStr
        if (arr.length < 4) {
          iconStr = 'plus'
        } else {
          iconStr = 'edit'
        }
        this.$set(this.filterResource, 'scopedSlots', { icon: iconStr })
        this.selectedKeys = params
        this.codeLine = codeLine
      } else {
        this.selectedKeys = null
        this.codeLine = ''
      }
    },
  },
}
</script>

<style lang="less" scoped>
.wrap {
  position: relative;
  width: 350px;
  background: #fff;
}
/deep/.ant-tree li span.ant-tree-iconEle {
  width: 14px;
  height: 14px;
  position: absolute;
  right: 70px;
  .plusType,
  .editType,
  .deleteType {
    &:hover {
      color: @primary-color;
    }
  }
}
/deep/.ant-tree-node-content-wrapper {
  max-width: 190px;
  overflow: hidden;
  text-overflow: ellipsis;
}
</style>