vue3 二次封装element plus框架的el-tree组件，自定义图标样式，添加层级线条（优的雅给element-plus的el-tree控件添加结构线，并结合透传传递参数）

        这是一个给 element-ui和element-plus的 el-tree 添加结构线的子组件，不会对 el-tree 原有的功能造成任何的影响，通过element-tree-line组件相结合，作为el-tree子组件的方式，无侵入性，可插拔，很优雅的添加结构线。

1、安装与使用

# npm
npm install element-tree-line -S

# yarn
yarn add element-tree-line -S

2、vue3 + element-plus

• 全局注册组件

// 全局注册组件
import { createApp, h } from 'vue';
import { getElementLabelLine } from 'element-tree-line';

// css
import 'element-tree-line/dist/style.css';

// or scss
// import 'element-tree-line/dist/style.scss';

// 创建一个Vue 应用

const app = Vue.createApp({});

// 全局注册ElementLabelLine
const ElementLabelLine = getElementLabelLine(h);
app.component(ElementLabelLine.name, ElementLabelLine);

• 局部注册组件

// or 局部注册组件
import { getElementLabelLine } from 'element-tree-line';

// css
import 'element-tree-line/dist/style.css';

// or scss
// import 'element-tree-line/dist/style.scss';

import { h } from 'vue';
export default {
  components: { ElementTreeLine: getElementLabelLine(h) },
  data() {
    return {};
  },
};

3、自定义封装的子组件

<template>
// 通过透传来传递参数，且不改变组件原有属性
	<el-tree v-bind="$attrs">
		<template #default="{ node }">
			<div class="tree-icon"></div>
			<element-tree-line :node="node" :showLabelLine="false" :indent="16"></element-tree-line>
		</template>
	</el-tree>
</template>
<script setup lang="ts">
import 'element-tree-line/dist/style.css';
import { getElementLabelLine } from 'element-tree-line';

const ElementTreeLine = getElementLabelLine(h);
</script>
<style scoped lang="scss">
.el-icon.el-tree-node__expand-icon ~ .tree-icon {
	@extend .tree-folder;
}

.el-icon.el-tree-node__expand-icon.expanded ~ .tree-icon {
	@extend .tree-folder-open;
}

.el-icon.el-tree-node__expand-icon.is-leaf ~ .tree-icon {
	@extend .tree-file;
}

.tree-folder {
	display: inline-block;
	width: 18px;
	height: 18px;
	margin: 4px 4px 2px 0;
	vertical-align: middle;
	overflow: hidden;
}

.tree-folder {
	background: url('./assets/folder-close.png') no-repeat;
	background-size: 100% auto;
}

.tree-folder-open {
	background: url('./assets/folder-open.png') no-repeat;
	background-size: 90% auto;
}

.tree-file {
	background: url('./assets/file.png') no-repeat;
	background-size: 90% auto;
}

::v-deep(.element-tree-node-label) {
	font-size: 14px !important;
}
</style>

        里面使用的图标样式

 

• 使用子组件

        首先引入自己定义的子组件,如：

import customTree from '/@/components/CustomTree/index.vue';

        在代码使用 

<el-card type="border-card" class="card-box">
	<template #header>
		<el-text type="primary" class="font-black">
			<el-icon class="mr-1">
				<PieChart />
			</el-icon>
			分类名称
		</el-text>
	</template>
	<customTree
		class="mx-2 mt-1"
		:data="data"
		:props="defaultProps"
		node-key="id"
		icon="ArrowRightBold"
		@node-click="handleNodeClick"
		highlight-current
		default-expand-all
	></customTree>
</el-card>

        效果如图： 

关于element-tree-line，可以参考：https://github.com/GitOfZGT/element-tree-line