树形控件加自定义图标样式及指引线

记录一下留用，有错误请指正。

效果图如下：

自定义图标及指引线

代码：


class="head-container" style="margin-left: -15px;">
     <el-tree icon-class="none"
       style="height:100%; overflow-y: hidden;"
       node-key="id"
       class="tree-line"
       :data="deptOptions"
       :props="defaultProps"
       :expand-on-click-node="false"
       :filter-node-method="filterNode"
       ref="tree"
       default-expand-all
       highlight-current
       @node-click="handleNodeClick"
     >
       <span class="custom-icon" slot-scope="{ node,data }" :style="getStyle(node)">
          <span :class="getIconClass(node)" :style="getIconStyle(node)" 
            v-if="node.data.children.length!==0" @click.stop="handleClick(node)">span>
          <span style="margin: 0px 5px 0px 15px;" v-else>span>
              <i class="el-icon-house" v-if="node.level == 1">i>
              <i class="el-icon-folder" v-else-if="node.level == 2">i>
              <i class="el-icon-document" v-else-if="node.level == 3">i>
              <i class="el-icon-document-copy" v-else>i>
              {{ data.name }}
          span>
    el-tree>


deptOptions: [],
defaultProps: {
   children: "children",
   label: "label",
},

js部分：


// 筛选节点
filterNode(value, data) {
   if (!value) return true;
   return data.label.indexOf(value) !== -1;
},
// 节点单击事件
handleNodeClick(data) {
  this.queryParams.deptId = data.id;
  this.handleQuery(); // 这里的需求是点击节点，查询对应节点下的数据，根据需求来写
},
handleClick(node) {
  node.expanded = !node.expanded
},
// 以下为样式，此章的关键部分
getStyle(node) {
   return node.level === 1 ? this.style : null
},
getIconStyle(node) {
  return node.level === 1 ? 'padding: 0px;border: 0.8px solid red;margin: 0px 5px 0px 5px;' : 'padding: 0px;border: 0.8px solid #36383d;margin: 0px 5px 0px 2px;'
},
getIconClass(node) {
   return node.expanded ? 'el-icon-minus' : 'el-icon-plus'
},

css样式：


.custom-icon {
    color: #36383d;
    font-size: 13px;
    margin-left: 5px;
}