element-tree-line el-tree 添加结构线 添加虚线

概览：给element组件添加上虚线，通过使用插件element-tree-line

参考连接：

参考别人的博客

安装插件：

# npm
npm install element-tree-line -S

# yarn
yarn add element-tree-line -S

main.js全局注册引入插件：

 

import { getElementLabelLine } from 'element-tree-line';
import 'element-tree-line/dist/style.css';
const ElementLabelLine = getElementLabelLine(h);
app.component(ElementLabelLine.name, ElementLabelLine);

el-tree组件封装：

<template><el-tree ref="treeRef" class="tree-content" :data="props.treeData" node-key="id" :highlight-current="true":props="props.defaultProps" icon="none" :current-node-key='0' default-expand-all :indent="props.treeIndent"><template #default="{ node, data }"><element-tree-line :node="node" :showLabelLine="false" :indent="props.treeIndent"><template v-slot:node-label><div class="com-tree"><i v-if="data.children?.length > 0":class="node.expanded ? 'iconfont icon-pinleijianshao' : 'iconfont icon-pinleizengjia'"class="tree-icon"></i><span class="com-tree-text" @click="nodeClick(data)">{{ node.label }}</span></div></template></element-tree-line></template></el-tree>
</template><script setup>
let props = defineProps({ treeData: Array, defaultProps: Object, treeIndent: Number });
const emits = defineEmits(['nodeClick']);
const nodeClick = (data) => {emits('nodeClick', data);
};
</script>

el-tree页面组件使用：

 

<el-scrollbar><Tree :treeData="data.treeData" :defaultProps="defaultProps" :treeIndent="data.treeIndent"@nodeClick="hanleNodeClick"></Tree>
</el-scrollbar>

 效果展示：