el-tree带指定图标动态加载

 

效果图 

 

 <el-tree
    :load="loadFolder"
    ref="tree"
    node-key="data_id"
    :props="{children: 'children',label: 'name',isLeaf: 'leaf'}"
    show-checkbox
    @check-change="handleCheckChange"
    empty-text = "正在获取数据">
    <span class="custom-tree-node" slot-scope="{node,data}" >
    <i :class="data.icon" style="color: #2482ED;"></i>
    <span :style="data.source !== 0?'':'font-weight: 600;'">{{ data.name }}</span>
    </span>
</el-tree>

 js方法

    loadFolder (node, resolve) { // 获取文件夹列表，动态加载
      let id = node.data ? node.data.data_id : ''
      this.$store.dispatch('list_tree', { id: id }).then(res => {
        for (let iterator of res.data.data) {
          if (iterator.name.includes('全国')) { // 将过长的数据切割重复的部分
            iterator.name = iterator.name.slice(13)
          }
          if (iterator.source !== 0) {
            iterator.leaf = true
            iterator.icon = 'el-icon-tickets'// 文件图标
          } else {
            iterator.disabled = true
            iterator.icon = 'el-icon-folder'// 文件夹图标
          }
        }
        resolve(res.data.data)
      })
    },
    handleCheckChange (data, checked, indeterminate) { // 匹配数据多选
       if (checked) {
        if (data.source !== 0) {
          this.tempData.push(data)
        }
      } else {
        this.tempData.forEach((ele, index) => {
          if (ele.data_id === data.data_id) {
            this.tempData.splice(index, 1) // 根据下标删除不需要的对象
          }
        })
      }
    },

 对于特定节点不显示图标

.tree{
  /deep/ .el-tree-node {//不显示文件夹节点
    .is-leaf + .el-checkbox .el-checkbox__inner {
     //在CSS中“+”符号选择器被称为相邻兄弟选择器，用于选取在同一父元素下的
//，紧跟指定元素之后的另一个元素。
        display:inline-block;
    }
    .el-checkbox__input> .el-checkbox__inner {
        display:none;
    }
  }
}