树形组件实现节点前图标

前言

先上实现效果，聚集了ElementUI树形组件的很多属性，比如，懒加载，selectbox，label前添加图标，将文件夹不能点击，只有图层才可以点击。

上源码

<template>
  <div class="layerManegement">
  <div class="headAdd">请选择图层添加或移除</div>
  <hr>
  <el-tree
    :data="treeData"
    :props="props1"
    :load="loadNode1"
    accordion
    highlight-current 
    node-key="value" 
    ref="tree"  
    draggable
    auto-expand-parent 
    :current-node-key="currentNodeKey" 
    :default-expanded-keys="defaultExpanded"
    :clear-check="clearCheck"
    :table-list-id="tableListId"
    @check="handleCheck"
    lazy
    show-checkbox>
      <span class="custom-tree-node" slot-scope="{node, data}">
        <span><i class="iconfont" :class="node.isLeaf === true ? 'icon-fuwurizhi' : 'icon-folderpaper'" style="margin-right: 10px;"></i>{{ node.label }}</span>
      </span>
  </el-tree>
  </div>
</template>
<script>
import Api from '@/api/Index.js'
export default {
  name: 'layerManegement',
  components: {
  },
  data () {
    return {
      props1: {
        label: 'label',
        children: 'children',
        isLeaf: 'isLeaf',
        disabled: 'disable'
      },
      flag: '',
      treeData: [],
      currentNodeKey: '', // 当前选中节点的key -> string
      defaultExpanded: [], // 默认展开的节点的key的数组
      clearCheck: false, // 重置选中
      sortTable: [], // 顺序列表
      tableList: [], // 已选服务
      tableListId: [] // 已选服务的id
    }
  },
  watch: {
    clearCheck (val) {
      this.$refs['tree'].setCheckedKeys([])
      this.lastData = []
    },
    tableListId (val) {
      this.$refs['tree'].setCheckedKeys(val)
      this.lastData = val
    }
  },
  mounted () {
    this.getDirectoryTree()
  },
  methods: {
    // 当复选框被点击的时候触发
    handleCheck (data, dataStatus) {
      if (dataStatus) { // 点击选中
        this.sortTable.push(data)
      } else { // 如果是取消选中
        let sort = this.sortTable.indexOf(data)
        this.sortTable.splice(sort, 1)
      }
      this.tableList = this.sortTable
    },
    loadNode1 (node, resolve) {
      if (node.level === 0) {
        return false
      }
      let arr = []
      Api.getDirectoryTree(node.data.value)
        .then(data => {
          if (data.status === 0) {
            let body = data.data
            // console.log(body)
            if (body instanceof Array) {
              if (body.length !== 0) {
                body.forEach(item => {
                  arr.push({
                    value: item.value,
                    label: item.label,
                    isLeaf: item.leaf,
                    disable: item.disable
                  })
                })
              } else {
                arr = []
                resolve([])
                return
              }
            } else {
              arr = []
            }
            let childData = arr
            setTimeout(() => {
              resolve(childData)
            }, 300)
          } else {
            this.$message({
              type: 'warning',
              message: '获取数据失败'
            })
          }
        })
        .catch(res => {
          this.$message({
            type: 'error',
            message: '获取数据失败'
          })
        })
    },
    // 调用接口获取目录树
    getDirectoryTree () {
      this.defaultExpanded = []    
      Api.getDirectoryTree(this.flag)
        .then(data => {
          let datas = data.data
          if (data.status === 0) {
            // this.treeData = datas
            if (datas instanceof Array) {
              if (datas.length !== 0) {
                datas.forEach(item => {
                  this.treeData.push({
                    value: item.value,
                    label: item.label,
                    isLeaf: item.leaf,
                    disable: item.disable
                  })
                })
                // console.log(this.treeData)
              } else {
                this.treeData = []
              }
            } else {
              this.treeData = []
            }
          } else {
            this.$message({
              type: 'warning',
              message: '获取数据失败'
            })
          }
        })
        .catch(res => {
          this.$message({
            type: 'error',
            message: '获取数据失败'
          })
        })
    },
    // 菜单树的勾选
    handleCheckChange (data) {
      // this.tableData = data[2]
      if (data[1]) {
        this.sortTable.push(data[0])
      } else {
        let sort = this.sortTable.indexOf(data[0])
        this.sortTable.splice(sort, 1)
      }
      this.tableData = this.sortTable
    },
    // 重置选择中的树
    handleReset () {
      this.tableList = []
      this.tableListId = []
      this.sortTable = []
      this.$emit('handle-reset', '')
      this.clearCheck = !this.clearCheck
    },
    // 关闭某项已选服务
    handleCloseList (item, index) {
      this.tableList.splice(index, 1)
      this.tableListId = []

      for (let i = 0; i < this.tableList.length; i++) {
        this.tableListId.push(this.tableList[i].id)
      }

      this.$emit('handle-click-list', item)
    }
  }
}
</script>
<style lang="scss">
.layerManegement {
  width: 100%;
  .headAdd {
    color: white;
  }
  .el-checkbox {
    margin-left: 0;
  }

}

</style>