基于elementui带连接线的树形控件_el-tree 带连接线的控件

作者：小小林熬夜学编程 | 2024-03-27 06:51:01

踩

el-tree 带连接线的控件

因工作需求，需要要书写一个基于elementUI带连接线的树形控件。因为自己也找了很久没有特别合适的组件。所以将自己写的分享一下。话不说多上图。图下就是我所书写的大概样式。补充一点，因为后期使用的时候，存在数据过多出现滚动条问题，所以可以在el-tree标签里添加 style=“overflow-y: auto;height: 100%;” 代码就会产生一个elementui自带的滚动条
在这里插入图片描述

第一张图
大体复制以下代码就像（因有两张本地图片，所以可能会出错，解决方案，代码中有注释）这里有一个open的属性是显示文件夹图标的切换的。附带下面会用到的两张图片
在这里插入图片描述

<template>
  <el-tree
    :data="data"
    ref="tree"
    :props="defaultProps"
    current-node-key="1"
    node-key="id"
    @node-click="nodeClick"
    default-expand-all
  >
    <div class="custom-tree-node" slot-scope="{ node, data}">
      <div>
        <!-- 没有子元素时显示的图标 (即是最后一层) -->
        <span v-if="!data.children||data.id=='0'">
          <i class="el-icon-document" style="color: #fd7575"></i>
        </span>
        <!-- 有子元素显示的图标 -->
        <span v-else>
          <!-- 这里的展开的显示隐藏即是 [+] [-] 因为这个是图片所以可能会报错  可以随意使用一个icon这图标替换 -->
          <img :src="data.open ? defaultOpen  : defaultClose" alt />
          <!-- 这里文件打开和关闭图标的切换  -->
          <i
            :class="data.open ?  'el-icon-folder-opened' : 'el-icon-folder' "
            style="color: #448ac4"
          ></i>
        </span>
        <!-- 名称 -->
        <span>{{ node.label }}</span>
      </div>
    </div>
  </el-tree>
</template>
<script>
export default {
  data() {
    return {
      defaultOpen: require("@/assets/common_images/0bcfbe2c-f036-47b7-8475-0372aba9d89c.png"),
      defaultClose: require("@/assets/common_images/c5c349ac-41e3-45ca-97ae-60a9c9ebd295.png"),
      data: [
        {
          label: "我的调研",
          open: true,
          children: [
            {
              label: "基础信息"
            }
          ]
        },
        {
          label: "你的调研",
          open: true,
          children: [
            {
              label: "采集系统"
            },
            {
              label: "收集系统"
            }
          ]
        },
        {
          label: "一级 3",
          open: true,
          children: [
            {
              label: "二级 3-1"
            },
            {
              label: "二级 3-2"
            }
          ]
        }
      ],
      defaultProps: {
        children: "children",
        label: "label"
      }
    };
  },
  methods: {
    nodeClick(data, checked, node) {
      data.open = !data.open;
    }
  }
};
</script>
<style lang="scss" scoped>
	// deep穿透
/deep/ .el-tree {
    // 将每一行的设置为相对定位 方便后面before after 使用绝对定位来固定位置
    .el-tree-node {
      position: relative;
      padding-left: 10px;
    }
    // 子集像右偏移 给数线留出距离
    .el-tree-node__children {
      padding-left: 10px;
    }
    //这是竖线
    .el-tree-node :last-child:before {
      height: 40px;
    }
    .el-tree > .el-tree-node:before {
      border-left: none;
    }
    .el-tree > .el-tree-node:after {
      border-top: none;
    }
    //这自定义的线 的公共部分
    .el-tree-node:before,
    .el-tree-node:after {
      content: "";
      left: -4px;
      position: absolute;
      right: auto;
      border-width: 1px;
    }
    .tree :first-child .el-tree-node:before {
      border-left: none;
    }
    // 竖线
    .el-tree-node:before {
      border-left: 1px solid #e3e3e3;
      bottom: 0px;
      height: 100%;
      top: -25px;
      width: 1px;
    }
    //横线
    .el-tree-node:after {
      border-top: 1px solid #e3e3e3;
      height: 20px;
      top: 14px;
      width: 24px;
    }
    .el-tree-node__expand-icon.is-leaf {
      width: 8px;
    }
    //去掉elementui自带的展开按钮  一个向下的按钮,打开时向右
    .el-tree-node__content > .el-tree-node__expand-icon {
      display: none;
    }
    //每一行的高度
    .el-tree-node__content {
      line-height: 30px;
      height: 30px;
    }
  }
  //去掉最上级的before  after 即是去电最上层的连接线
  /deep/ .el-tree > div {
    &::before {
      display: none;
    }
    &::after {
      display: none;
    }
  }
</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
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

第二张
后期改动后发现三级菜单会有点问题，所以做出点修改（不好意思由于这个设计的特殊性，现在样式只能达到三级菜单不会出问题）

<template>
  <div>
      <div class="waitQues">
      <div
        style="height: 34px; line-height: 34px; background: #f1f1f1; color: #3378b1;font-size: 14px; font-weight: 700; padding-left: 20px;"
      >待选问卷题目</div>
      <el-tree
        :data="data"
        ref="tree1"
        :props="defaultProps"
        current-node-key="1"
        node-key="id"
        show-checkbox
        @node-click="nodeClick"
      >
        <div class="custom-tree-node" slot-scope="{ node, data}">
          <div>
            <span v-if="!data.children||data.id=='0'">
              <span>{{ node.label }}</span>
              <span class="examine">
              </span>
            </span>
            <span v-else style="position: relative;">
              <img
                :src="data.open ? defaultOpen  : defaultClose"
                alt
                style="position: absolute;left: -44px; top: 4px; z-index: 999; "
              />
              <!-- 这里的定位会根据位置的不同需要做细微的调整 op: 4px-->
              <span>{{ node.label }}</span>
            </span>
          </div>
        </div>
      </el-tree>
    </div>
  </div>
</template>
<script>
export default {
    data() {
        return {
             defaultOpen: require("@/assets/0bcfbe2c-f036-47b7-8475-0372aba9d89c.png"),
      defaultClose: require("@/assets/c5c349ac-41e3-45ca-97ae-60a9c9ebd295.png"),
             defaultProps: {
        children: "children",
        label: "label"
      },
            data: [
        {
            "children":[
                {
                    "children":[
                        {
                            "id":"12",
                            "label":"aa",
                            "open":"false"
                        },
                        {
                            "id":"14d32f323c3f393e7e7dc11c5c76ea36",
                            "label":"王企鹅",
                            "open":"false"
                        },
                        {
                            "id":"1670bff29aa91b9a8d0aa86c9b6b195b",
                            "label":"测试3",
                            "open":"false"
                        },
                        {
                            "id":"4673c6eee0c6300e2aca1294c4543c23",
                            "label":"我是",
                            "open":"false"
                        },
                        {
                            "id":"743bb731f861436c001997a2cdf2c97c",
                            "label":"熊",
                            "open":"false"
                        }
                    ],
                    "label":"基础信息",
                    "id":201001,
                    "open":"false"
                },
                {
                    "children":[
                        {
                            "id":"177f8165d40f50a4cc2b19c43c2f5f21",
                            "label":"noise",
                            "open":"false"
                        },
                        {
                            "id":"2df071bd6941adf7f58da29edba25fdb",
                            "label":"适宜2",
                            "open":"false"
                        },
                        {
                            "id":"3e7171061352e04ae4b01375d10008fd",
                            "label":"dsadasd",
                            "open":"false"
                        }
                    ],
                    "label":"用能信息",
                    "id":201002,
                    "open":"false"
                },
                {
                    "children":[
                        {
                            "id":"87caeabe45543f72f2498da8a2fa2fa5",
                            "label":"就没那么",
                            "open":"false"
                        },
                        {
                            "id":"8f40843bdb7239c31577154826b25a23",
                            "label":"新增1",
                            "open":"false"
                        },
                        {
                            "id":"aaf3f961834fd4e5b3ffef4caaa82a4d",
                            "label":"看看",
                            "open":"false"
                        }
                    ],
                    "label":"能源控制系统",
                    "id":201003,
                    "open":"false"
                },
                {
                    "children":[

                    ],
                    "label":"用户需求",
                    "id":201004,
                    "open":"false"
                },
                {
                    "children":[

                    ],
                    "label":"我的",
                    "id":201006,
                    "open":"false"
                },
                {
                    "children":[

                    ],
                    "label":"试试",
                    "id":201007,
                    "open":"false"
                },
                {
                    "children":[

                    ],
                    "label":"最后",
                    "id":201007,
                    "open":"false"
                },
                {
                    "children":[

                    ],
                    "label":"饿",
                    "id":201009,
                    "open":"false"
                }
            ],
            "label":"用户级调研",
            "id":2010,
            "open":"false"
        },
        {
            "children":[
                {
                    "children":[

                    ],
                    "label":"采集系统",
                    "id":202001,
                    "open":"false"
                },
                {
                    "children":[

                    ],
                    "label":"配电系统",
                    "id":202002,
                    "open":"false"
                },
                {
                    "children":[

                    ],
                    "label":"暖通",
                    "id":202003,
                    "open":"false"
                },
                {
                    "children":[

                    ],
                    "label":"照明",
                    "id":202004,
                    "open":"false"
                },
                {
                    "children":[
                        {
                            "id":"3b929734984d6bff30c71519c729a1ef",
                            "label":"光伏电站发电补贴电价",
                            "open":"false"
                        },
                        {
                            "id":"50a91e08943a670abece489dd2ac1090",
                            "label":"光伏电站面积",
                            "open":"false"
                        },
                        {
                            "id":"597ad106e5c0f7cf24363d0815eeaffc",
                            "label":"光伏电站投资预估单价",
                            "open":"false"
                        },
                        {
                            "id":"90524c84cc965d37923f221218caca8f",
                            "label":"光伏电站发电工商电价",
                            "open":"false"
                        },
                        {
                            "id":"e86e751fcad8568e3b6dc769312b80f3",
                            "label":"光伏电站所在地级市",
                            "open":"false"
                        },
                        {
                            "id":"e86e751fcad8568e3b6dc769312b80f4",
                            "label":"光伏电站所在地级市类别",
                            "open":"false"
                        }
                    ],
                    "label":"光储充",
                    "id":202005,
                    "open":"false"
                },
                {
                    "children":[

                    ],
                    "label":"分布式能源",
                    "id":202006,
                    "open":"false"
                },
                {
                    "children":[

                    ],
                    "label":"给排水",
                    "id":202007,
                    "open":"false"
                },
                {
                    "children":[

                    ],
                    "label":"电梯",
                    "id":202008,
                    "open":"false"
                }
            ],
            "label":"系统级调研",
            "id":2020,
            "open":"false"
        },
        {
            "children":[
                {
                    "children":[

                    ],
                    "label":"采集系统",
                    "id":203001,
                    "open":"false"
                },
                {
                    "children":[

                    ],
                    "label":"配电系统",
                    "id":203002,
                    "open":"false"
                },
                {
                    "children":[

                    ],
                    "label":"暖通",
                    "id":203003,
                    "open":"false"
                },
                {
                    "children":[

                    ],
                    "label":"照明",
                    "id":203004,
                    "open":"false"
                },
                {
                    "children":[

                    ],
                    "label":"光储充",
                    "id":203005,
                    "open":"false"
                },
                {
                    "children":[

                    ],
                    "label":"分布式能源",
                    "id":203006,
                    "open":"false"
                },
                {
                    "children":[

                    ],
                    "label":"给排水",
                    "id":203007,
                    "open":"false"
                },
                {
                    "children":[

                    ],
                    "label":"电梯",
                    "id":203008,
                    "open":"false"
                }
            ],
            "label":"设备级调研",
            "id":2030,
            "open":"false"
        }
    ]
        };
    },
    methods: {
        nodeClick(data) {
      data.open = !data.open;
    },
    }
};
</script>
<style lang="less" scoped>
.waitQues {
  margin: 10px 140px 20px;
  width: 280px;
  border-radius: 4px;
  border: 1px solid #d5d5d5;
  /deep/ .el-tree {
    margin: 20px 0 20px 50px;
    .el-tree-node {
      position: relative;
      padding-left: 10px;
    }
    .el-tree-node__children {
      padding-left: 10px;
    }
    .el-tree-node :last-child:before {
      height: 40px;
    }
    .el-tree > .el-tree-node:before {
      border-left: none;
    }
    .el-tree > .el-tree-node:after {
      border-top: none;
    }
    .el-tree-node:before,
    .el-tree-node:after {
      content: "";
      left: -4px;
      position: absolute;
      right: auto;
      border-width: 1px;
    }
    .tree :first-child .el-tree-node:before {
      border-left: none;
    }
    .el-tree-node:before {
      border-left: 1px solid #e3e3e3;
      bottom: 0px;
      height: 100%;
      top: -25px;
      width: 1px;
    }
    .el-tree-node:after {
      border-top: 1px solid #e3e3e3;
      height: 20px;
      top: 14px;
      width: 26px;
    }
    .el-tree-node__expand-icon.is-leaf {
      width: 8px;
    }
    .el-tree-node__content > .el-tree-node__expand-icon {
      display: none;
      // visibility: hidden;
    }
    .el-tree-node__content {
      line-height: 30px;
      height: 30px;
      padding-left: 22px !important;
      &:hover .examine {
        display: block;
        display: inline-block;
      }
    }
  }
  /deep/ .el-tree > div {
    &::before {
      display: none;
    }
    &::after {
      display: none;
    }
  }
}
</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
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
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427

声明：本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：【wpsshop博客】