Element为el-tree添加指示连接虚线

element的tree树结构默认是不带连接虚线的,但可以用自定义css实现指示连接虚线,先看一下效果图; 案例有两部分,数字可点击和正常element,此处旋转的三角可以使用css覆盖为图片,行点击及h...

element的tree树结构默认是不带连接虚线的,但可以用自定义css实现指示连接虚线,先看一下效果图;

attachments-2022-01-nCx5ttkv61d6b85f01981.png

案例有两部分,数字可点击和正常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
  • 阅读 ( 518 )

你可能感兴趣的文章

相关问题

0 条评论

请先 登录 后评论
admin
admin

651 篇文章

作家榜 »

  1. admin 651 文章
  2. 粪斗 185 文章
  3. 王凯 92 文章
  4. 廖雪 78 文章
  5. 牟雪峰 12 文章
  6. 李沁雪 9 文章
  7. 全易 2 文章
  8. bngvzaeysj 0 文章