使用了一个第三方插件,地址https://github.com/GitOfZGT/element-tree-line
用法简单,灵活,通过slot实现,侵入性低,关键代码如下
template
<el-tree
ref="treeRef"
:data="state.treeData"
node-key="id"
default-expand-all
highlight-current
:props="defaultProps"
:filter-node-method="filterNode"
:expand-on-click-node="false"
@node-click="handleNodeClick"
:current-node-key="state.currentNodeKey"
>
<!--关键代码-->
<template v-slot:default="{ node }">
<element-tree-line :node="node" :showLabelLine="false" :indent="16"> </element-tree-line>
</template>
</el-tree>
script
<script setup lang="ts">
import { getElementLabelLine } from "element-tree-line";
import { ref, reactive, watch, h} from "vue";
const ElementTreeLine = getElementLabelLine(h);
</script>
main.ts引入样式
import 'element-tree-line/dist/style.css'