基于elementui带连接线的树形控件
程序员文章站
2022-06-28 19:03:39
因工作需求，这把要书写一个基于elementUI带连接线的树形控件。因为自己也找了很久没有特别合适的组件。所以将自己写的分享一下。话不说多 上图 。图下就是我所书写的大概样式第一张图大体复制以下代码就像（因有两张本地图片，所以可能会出错，解决方案，代码中有注释） 这里有一个open的属性是显示文件夹图标的切换的。
因工作需求，这把要书写一个基于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>
第二张
第二个还未分装所以，可能数据会不全，但大体和上面一致
<template>
<el-tree
:data="data"
ref="tree"
: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-else style="position: relative;">
<img
:src="data.open ? defaultOpen : defaultClose"
alt
style="position: absolute;left: -44px; top: 1px; "
/>
<span>{{ node.label }}</span>
</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/ .el-tree {
margin: 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;
&:hover .examine {
display: block;
display: inline-block;
}
}
}
/deep/ .el-tree > div {
&::before {
display: none;
}
&::after {
display: none;
}
}
</style>
本文地址：https://blog.csdn.net/weixin_44981586/article/details/107317544
上一篇： HTML5中的Canvas绘图