el-tree懒加载以及动态局部刷新数据，添加指示虚线_el-tree 动态样式

1、:render-content="renderContent"可以渲染树的样式
2、再次点击已经展开过的节点不执行load方法时使用以下方法让此重新执行

// node.childNodes=[];
node.loaded = false;
node.expand();
1
2
3

注意设置： :indent=“0”，否则节点会出现较大缩进

<template>
  <div class="classifyManage">
      <!-- 左侧树 -->
      <el-tree class="tree-line" :indent="0" :props="defaultProps" ref="tree" :load="loadNode" lazy @node-click="handleNodeClick" node-key="sortCodeName" :default-expanded-keys="treeExpandData" :render-content="renderContent"></el-tree>
      <!-- 右侧 -->
      <div class="search-form">
        <label>时间选择：</label>
        <el-date-picker clearable class="search-input pad30 magRight10" type="date" placeholder="选择日期时间" value-format="yyyy-MM-dd HH:mm:ss" v-model="startTime" :picker-options="startPickerOptions"></el-date-picker>至
        <el-date-picker clearable class="search-input pad30 magLeft10" type="date" placeholder="选择日期时间" value-format="yyyy-MM-dd HH:mm:ss" v-model="endTime" :picker-options="endPickerOptions"></el-date-picker>
       </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      startTime: "", //开始时间
      endTime: "", //结束时间
      startPickerOptions: {
        disabledDate: (time) => {
          if (this.endTime) {
            return time.getTime() > new Date(this.endTime).getTime();
          } else {
            return time.getTime() > Date.now();
          }
        },
      }, //时间选择禁止选择未来日期:[],
      endPickerOptions: {
        disabledDate: (time) => {
          if (this.startTime) {
            return (
              time.getTime() < new Date(this.startTime).getTime() ||
              time.getTime() > Date.now()
            );
          }
        },
      },
      defaultProps: {
        children: "children",
        label: "sortCodeName",
        isLeaf: (data, node) => {
        // 当级别为5时不展示下拉箭头，也就是为叶子节点
          if (node.level === 5) {
            return true;
          }
        },
      },
      currentObj: null,
      node_had: [], //缓存树节点的node
      resolve_had: [], //缓存树节点的resolve
      treeExpandData:[],//树默认展开的数组
      arrIndex:"",//分类码数组的下标
    };
  },
  created(){
    this.queryUsingInfoResTypeFun(res=>{
      this.treeExpandData.push("全部分类");
    });
  },
  watch: {
     'treeExpandData':function(newVal, oldVal) {
       if(newVal){
        this.$nextTick(() => {
          const firstNode = document.querySelector(".el-tree-node").children[0];
          if(firstNode){
            firstNode.click();
          }
        })
       }
     }
  },
  computed:{
      fatherName(){
        var result=""
        if(this.node_had.data){
          if(this.node_had.data.sortCodeName=="全部分类"){
              result="全部分类";
          }else{
              result=this.currentObj.sortCodeName;
          }
        }
        return result;
      },
  },
  methods: {
    // 懒加载树节点
    loadNode(node, resolve) {
      this.node_had = node;
      this.resolve_had = resolve;
      // 第一级插入全部分类
      if (node.level === 0) {
        resolve([{ sortCodeName: "全部分类", parentSortCode: 0 }]);
            // this.$nextTick().then(() => {
            // const firstNode = document.querySelector(".el-tree-node");
            // if(firstNode){
            //  firstNode.click();
            // }
            // });
      }
      // 二级分类使用0查询
      if (node.level == 1) {
        querySortListByParentCode(0, (res) => {
          if (res.code == 0) {
            resolve(res.data);
          }
        });
        // 目前为4级
      } else if (node.level <= this.level) {
        node.isLeaf = false;
        querySortListByParentCode(node.data.sortCodeCode, (res) => {
          if (res.code == 0) {
            resolve(res.data);
          }
        });
      } else {
        node.isLeaf = false;
        resolve([]);
      }
    },
    //当code=1时置灰字体
    renderContent(h, { node, data, store }) {
      if (node.level == this.level + 1) {
        return (
          <el-button type="text" id="codeStop" disabled style="color:#a1a8af">
            {node.data.sortCodeName}
          </el-button>
        );
      } else {
        return (
          <el-button type="text" style="color:#2f4470">
            {node.data.sortCodeName}
          </el-button>
        );
      }
    },
    // 点击树节点
    handleNodeClick(data,node) {
      ***// 重点：让load重新执行的方法，会重新调用this.loadNode方法，展开过之后再点击依然可以刷新数据
      node.childNodes=[];
      node.loaded = false;
      node.expand();***

      this.currentObj = data;
        //   最后一级禁用新增按钮
      this.arrIndex = this.usingInfoResType[this.currentObj.rateCode];
      if (this.arrIndex < this.level || this.arrIndex == undefined) {
        this.addBtn = true;
      } else {
        this.addBtn = false;
      }
      if (data.parentSortCode !== 0 && this.arrIndex !== this.level) {
        this.tableColumn.name =
          this.resTypeDataRatesResult[this.arrIndex].rateName + "的名称";
      } else {
        this.tableColumn.name = "类的名称";
      }
      this.getTableData();
    },
    // 编辑表格刷新树
    editSortCodeFun() {
    	this.loadNode(this.node_had, this.resolve_had);
    }
    },
  },
};
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167

el-tree添加指示虚线，最终效果如下：

// 设置样式

注意：tree-line是tree父容器的类名，通过此方法设置tree的根节点样式，以下为scss，记得去掉scoped，或者使用/deep/

<style lang="scss">
.tree-line{
  .el-tree-node {
    position: relative;
    padding-left: 16px; // 缩进量
  }
  .el-tree-node__children {
    padding-left: 16px; // 缩进量
  }
  // 竖线
  .el-tree-node::before {
    content: "";
    height: 100%;
    width: 1px;
    position: absolute;
    left: -3px;
    top: -26px;
    border-width: 1px;
    border-left: 1px dashed #52627C;
  }
  // 当前层最后一个节点的竖线高度固定
  .el-tree-node:last-child::before {
    height: 38px; // 可以自己调节到合适数值
  }
  // 横线
  .el-tree-node::after {
    content: "";
    width: 24px;
    height: 20px;
    position: absolute;
    left: -3px;
    top: 12px;
    border-width: 1px;
    border-top: 1px dashed #52627C;
  }
  // 去掉最顶层的虚线，放最下面样式才不会被上面的覆盖了
  & > .el-tree-node::after {
    border-top: none;
  }
  & > .el-tree-node::before {
    border-left: none;
  }
  // 展开关闭的icon
  .el-tree-node__expand-icon{
    font-size: 16px;
    // 叶子节点（无子节点）
    &.is-leaf{
      color: transparent;
      // display: none; // 也可以去掉
    }
  }
}
// 不旋转图标
.el-tree .el-tree-node__expand-icon.expanded {
  -webkit-transform: rotate(0deg) !important;
  transform: rotate(0deg) !important;
}
.el-tree .el-tree-node__expand-icon.expanded {
  -webkit-transform: rotate(0deg) !important;
  transform: rotate(0deg) !important;
}
// 未展开时显示加号
.el-tree .el-icon-caret-right:before {
  background: url("../images/iconjia.png") no-repeat 0 3px !important;
  content: "";
  display: block;
  width: 16px;
  height: 20px;
  font-size: 16px;
  /* background-size: 15px!important; */
}
/* 有子节点 且已展开显示减号 */
.el-tree .el-tree-node__expand-icon.expanded.el-icon-caret-right:before {
  background: url("../images/iconjian.png") no-repeat !important;
  content: "";
  display: block;
  width: 16px;
  height: 16px;
  font-size: 16px;
  /* background-size: 15px!important;; */
}
/* 没有子节点不显示图片 */
.el-tree .el-tree-node__expand-icon.is-leaf::before {
  background: url("") no-repeat 0 3px !important;
  content: "";
  display: block;
  width: 14px;
  height: 21px;
  font-size: 16px;
  background-size: 16px;
}
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92