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

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

效果图如下：

自定义图标及指引线

代码：

     
       
          
          
              
              
              
              
              {{ data.name }}
          
    

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;
}