Element为el-tree添加指示连接虚线
element的tree树结构默认是不带连接虚线的，但可以用自定义css实现指示连接虚线，先看一下效果图；
案例有两部分，数字可点击和正常element,此处旋转的三角可以使用css覆盖为图片，行点击及h...
element的tree树结构默认是不带连接虚线的，但可以用自定义css实现指示连接虚线，先看一下效果图；
案例有两部分，数字可点击和正常element,此处旋转的三角可以使用css覆盖为图片，行点击及hover效果同理。
下面上实例：可直接复制到html文件运行
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- import CSS -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>
<body>
<div id="app">
<div class="treeStyle">
<div class="tree-container">
<!-- 样式1 -->
<div id="" style="color: red;margin-top: 20px;">样式1 数字可点击</div>
<el-tree class="tree" :indent="0" :data="data">
<span class="custom-tree-node" slot-scope="{ data }">
<span>{{ data.label }}</span>
<span :class="'treeColor'" @click="() => append(data)">({{ data.num }})</span>
</span>
</el-tree>
<!-- 样式2-->
<div id="" style="color: red;margin-top: 20px;">样式2</div>
<el-tree class="tree" :data="data" :props="defaultProps"></el-tree>
</div>
</div>
</div>
</body>
<!-- import Vue before Element -->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<!-- import JavaScript -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>
new Vue({
el: '#app',
data: function() {
return {
defaultProps: {
children: 'children',
label: 'label',
},
data: [{
label: '全部',
num: 3240,
type: true,
children: [{
label: '危险车辆高发地段',
num: 340,
type: true,
children: [{
label: '第七大街',
num: 4,
type: true,
},
{
label: '第六大街',
num: 4,
type: true,
},
{
label: '第三大街',
num: 4,
type: true,
},
{
label: '南海路',
num: 4,
type: true,
},
{
label: '朝阳路',
num: 4,
type: true,
},
],
},
{
label: '车辆拥堵高发地段',
num: 123,
type: true,
children: [{
label: '全部',
num: 3240,
type: true,
}, ],
},
{
label: '车辆入侵高发地段',
num: 123,
type: true,
children: [{
label: '全部',
num: 3240,
type: true,
}, ],
},
],
}, ],
}
},
methods: {
// 点击数字
append(data) {
console.log(data);
}
},
})
</script>
<style type="text/css">
body {
background: #010723;
}
.treeStyle {
position: fixed;
width: 410px;
height: 600px;
// background: #111e3e;
z-index: 9999;
}
.tree-container {
overflow: hidden;
}
.tree {
background: transparent;
color: #def5fe;
font-size: 18px;
}
.treeColor {
color: #feeb92;
padding-left: 10px;
}
.tree .el-tree-node__content {
height: 40px;
}
.tree .el-tree-node {
position: relative;
padding-left: 0;
}
.tree .el-tree-node__expand-icon {
font-size: 18px;
color: #def5fe;
}
.tree .el-tree-node__expand-icon.is-leaf {
color: transparent;
cursor: default;
}
.tree .el-tree-node__children {
padding-left: 19px;
}
.tree .el-tree-node :last-child:before {
height: 12px;
}
.tree .el-tree>.el-tree-node:before {
border-left: none;
}
.tree-container .el-tree>.el-tree-node:after {
border-top: none;
}
.tree .el-tree-node:before {
content: '';
left: -4px;
position: absolute;
right: auto;
border-width: 1px;
border-left: 1px dotted #5abcde;
bottom: 0px;
height: 100%;
top: 0px;
width: 1px;
}
.tree .el-tree-node:after {
content: '';
left: -4px;
position: absolute;
right: auto;
border-width: 1px;
border-top: 1px dotted #5abcde;
height: 20px;
top: 12px;
width: 10px;
}
</style>
</html>
以上案例为普通写法，使用vue加TS或JS的要稍微修改下语法，在组件内写记得css加/deep/
vue+ts组件实例（JS需要修改语法）
<template>
<div>
<div class="treeStyle">
<div class="tree-container">
<el-tree class="tree" :indent="0" :data="data">
<span class="custom-tree-node" slot-scope="{ data }">
<span>{{ data.label }}</span>
<span :class="'treeColor'">({{ data.num }})</span>
</span>
</el-tree>
<el-tree class="tree" :data="data" :props="defaultProps" @node-click="handleNodeClick"></el-tree>
</div>
</div>
</div>
</template>
<script lang="ts">
import { Vue, Component } from 'vue-property-decorator';
@Component({
name: 'chemicalPerformanceDuties',
})
export default class ChemicalPerformanceDuties extends Vue {
private data: any = [
{
label: '全部',
num: 3240,
type: true,
children: [
{
label: '危险车辆高发地段',
num: 340,
type: true,
children: [
{
label: '第七大街',
num: 4,
type: true,
},
{
label: '第六大街',
num: 4,
type: true,
},
{
label: '第三大街',
num: 4,
type: true,
},
{
label: '南海路',
num: 4,
type: true,
},
{
label: '朝阳路',
num: 4,
type: true,
},
],
},
{
label: '车辆拥堵高发地段',
num: 123,
type: true,
children: [
{
label: '全部',
num: 3240,
type: true,
},
],
},
{
label: '车辆入侵高发地段',
num: 123,
type: true,
children: [
{
label: '全部',
num: 3240,
type: true,
},
],
},
],
},
];
private defaultProps: any = {
children: 'children',
label: 'label',
};
private append(data: any) {
console.log(data);
}
}
</script>
<style scoped lang="less">
.treeStyle {
position: fixed;
width: 410px;
height: 600px;
// background: #111e3e;
z-index: 9999;
}
.tree-container {
overflow: hidden;
}
.tree {
background: transparent;
color: #def5fe;
font-size: 18px;
}
.treeColor {
color: #feeb92;
padding-left: 10px;
}
.tree /deep/ .el-tree-node__content {
height: 40px;
}
.tree /deep/ .el-tree-node {
position: relative;
padding-left: 0;
}
.tree /deep/ .el-tree-node__expand-icon {
font-size: 18px;
color: #def5fe;
}
.tree /deep/ .el-tree-node__expand-icon.is-leaf {
color: transparent;
cursor: default;
}
.tree /deep/ .el-tree-node__children {
padding-left: 19px;
}
.tree /deep/ .el-tree-node :last-child:before {
height: 12px;
}
.tree /deep/ .el-tree > .el-tree-node:before {
border-left: none;
}
.tree-container /deep/ .el-tree > .el-tree-node:after {
border-top: none;
}
.tree /deep/ .el-tree-node:before {
content: '';
left: -4px;
position: absolute;
right: auto;
border-width: 1px;
border-left: 1px dotted #5abcde;
bottom: 0px;
height: 100%;
top: 0px;
width: 1px;
}
.tree /deep/ .el-tree-node:after {
content: '';
left: -4px;
position: absolute;
right: auto;
border-width: 1px;
border-top: 1px dotted #5abcde;
height: 20px;
top: 12px;
width: 10px;
}
</style>
- 发表于 2022-01-06 17:46
- 阅读 ( 602 )
