vue3.2 element-plus el-tree添加结构线/引导线_element-tree-line

使用了一个第三方插件，地址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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

script

<script setup lang="ts">
import { getElementLabelLine } from "element-tree-line";
import { ref, reactive, watch, h} from "vue";
const ElementTreeLine = getElementLabelLine(h);
</script>
1
2
3
4
5

main.ts引入样式

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