LineTree 带线的树
使 ElTree 组件带有线的功能
基础用法
默认使用姿势与ElTree一致。
Level one 1
Level one 2
Level one 3
vue
<template>
<el-line-tree
style="max-width: 600px"
:data="data"
@node-click="handleNodeClick"
/>
</template>
<script lang="ts" setup>
interface Tree {
label: string
children?: Tree[]
}
const handleNodeClick = (data: Tree) => {
console.log(data)
}
const data: Tree[] = [
{
label: 'Level one 1',
children: [
{
label: 'Level two 1-1',
children: [
{
label: 'Level three 1-1-1',
children: [
{
label: 'Level four 1-1-1-1',
children: [
{
label: 'Level five 1-1-1-1-1',
},
],
},
{
label: 'Level four 1-1-1-1',
children: [
{
label: 'Level five 1-1-1-1-1',
},
],
},
],
},
],
},
{
label: 'Level two 1-2',
},
],
},
{
label: 'Level one 2',
children: [
{
label: 'Level two 2-1',
children: [
{
label: 'Level three 2-1-1',
},
],
},
{
label: 'Level two 2-2',
children: [
{
label: 'Level three 2-2-1',
},
],
},
],
},
{
label: 'Level one 3',
children: [
{
label: 'Level two 3-1',
children: [
{
label: 'Level three 3-1-1',
},
],
},
{
label: 'Level two 3-2',
children: [
{
label: 'Level three 3-2-1',
},
],
},
],
},
]
</script>隐藏源代码
线的弧度
使用line-radius属性来设置线的弧度。使用line-color设置线的颜色。
使用icon组件和icon-props来快速设置折叠器的 icon 及属性
Level one 1
Level one 2
Level one 3
vue
<template>
<el-line-tree
style="max-width: 600px"
:data="data"
:show-checkbox="false"
line-radius="4px"
line-color="red"
:icon="Edit"
:icon-props="{ color: 'red' }"
@node-click="handleNodeClick"
/>
</template>
<script lang="ts" setup>
import { Edit } from '@element-plus/icons-vue'
interface Tree {
label: string
children?: Tree[]
}
const handleNodeClick = (data: Tree) => {
console.log(data)
}
const data: Tree[] = [
{
label: 'Level one 1',
children: [
{
label: 'Level two 1-1',
children: [
{
label: 'Level three 1-1-1',
children: [
{
label: 'Level four 1-1-1-1',
children: [
{
label: 'Level five 1-1-1-1-1',
},
],
},
{
label: 'Level four 1-1-1-1',
children: [
{
label: 'Level five 1-1-1-1-1',
},
],
},
],
},
],
},
{
label: 'Level two 1-2',
},
],
},
{
label: 'Level one 2',
children: [
{
label: 'Level two 2-1',
children: [
{
label: 'Level three 2-1-1',
},
],
},
{
label: 'Level two 2-2',
children: [
{
label: 'Level three 2-2-1',
},
],
},
],
},
{
label: 'Level one 3',
children: [
{
label: 'Level two 3-1',
children: [
{
label: 'Level three 3-1-1',
},
],
},
{
label: 'Level two 3-2',
children: [
{
label: 'Level three 3-2-1',
},
],
},
],
},
]
</script>隐藏源代码
自定义折叠器
使用collapse插槽来设置自定义折叠器。当使用自定义折叠器插槽时，修改 ui 尺寸后，必须设置collapse-width的值，该值为自定义折叠器UI的宽度。
由于线的位置是基于自定义折叠器UI的宽度动态通过 css 计算的，所以需要设置collapse-width值，当然你也可以手动修改 css 变量也行，只不过没有该属性方便。
Level one 1
Level one 2
Level one 3
vue
<template>
<el-line-tree
style="max-width: 600px"
:data="options"
line-radius="4px"
collapse-width="14px"
@node-click="handleNodeClick"
>
<template #collapse="{ node }">
<el-icon
size="14"
:class="node.isLeaf ? 'is-leaf' : ''"
color="var(--el-tree-expand-icon-color)"
>
<component :is="node.expanded ? CaretBottom : CaretRight" />
</el-icon>
</template>
</el-line-tree>
</template>
<script lang="ts" setup>
import { CaretBottom, CaretRight } from '@element-plus/icons-vue'
interface Tree {
label: string
children?: Tree[]
}
const handleNodeClick = (data: Tree) => {
console.log(data)
}
const options: Tree[] = [
{
label: 'Level one 1',
children: [
{
label: 'Level two 1-1',
children: [
{
label: 'Level three 1-1-1',
children: [
{
label: 'Level four 1-1-1-1',
children: [
{
label: 'Level five 1-1-1-1-1',
},
],
},
{
label: 'Level four 1-1-1-1',
children: [
{
label: 'Level five 1-1-1-1-1',
},
],
},
],
},
],
},
{
label: 'Level two 1-2',
},
],
},
{
label: 'Level one 2',
children: [
{
label: 'Level two 2-1',
children: [
{
label: 'Level three 2-1-1',
},
],
},
{
label: 'Level two 2-2',
children: [
{
label: 'Level three 2-2-1',
},
],
},
],
},
{
label: 'Level one 3',
children: [
{
label: 'Level two 3-1',
children: [
{
label: 'Level three 3-1-1',
},
],
},
{
label: 'Level two 3-2',
children: [
{
label: 'Level three 3-2-1',
},
],
},
],
},
]
</script>隐藏源代码
自定义节点内容
使用默认插槽可以自定义节点内容，由于业务的复杂性，节点的高度可能不是固定的，比如这面这个案列
当自定义节点的内容也需要连线时，可以使用show-content-line属性开启
接收消息: 0s
工作流调用: 5s
开始: 0s
意图识别: 1s
输出: 0s
汇总响应: 0s
输出: 0s
vue
<template>
<el-line-tree
:data="options"
line-radius="4px"
collapse-width="20px"
default-expand-all
show-content-line
:expand-on-click-node="false"
:expand-on-click-icon="false"
style="max-width: 600px"
>
<template #collapse="{ data }">
<el-image
:src="data.img"
style="width: 20px; height: 20px; border-radius: 6px; z-index: 1"
/>
</template>
<template #default="{ data }">
<div class="line-tree__node-header">
<div>
{{ data.label }}: <span> {{ data.time }}s</span>
</div>
<el-icon
style="margin-left: 6px"
@click.stop="data.visible = !data.visible"
>
<component :is="data.visible ? CaretTop : CaretBottom" />
</el-icon>
</div>
<el-collapse-transition>
<div
v-if="data.visible"
style="height: 80px"
class="line-tree__node-content"
>
{{ data.content }}
</div>
</el-collapse-transition>
</template>
</el-line-tree>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
import { CaretBottom, CaretTop } from '@element-plus/icons-vue'
import type { Ref } from 'vue'
interface Tree {
label: string
children?: Tree[]
[prop: string]: any
}
const options: Ref<Tree[]> = ref([
{
label: '接收消息',
img: 'https://oss.real-bot.cn/web/om/workflow/receiving_message.png',
time: 0,
content: '接收消息-1',
visible: false,
},
{
label: '工作流调用',
time: 5,
img: 'https://oss.real-bot.cn/web/om/workflow/workflow_call.png',
content: '工作流调用-1',
visible: false,
children: [
{
label: '开始',
img: 'https://oss.real-bot.cn/web/om/workflow/logic-start.png',
time: 0,
content: '开始-1',
visible: false,
children: [
{
label: '意图识别',
img: 'https://oss.real-bot.cn/web/om/workflow/sop_intent_recognition.png',
time: 1,
content: '意图识别-1',
visible: false,
children: [
{
label: '输出',
img: 'https://oss.real-bot.cn/web/om/workflow/output.png',
time: 0,
content: '输出-1',
visible: false,
},
],
},
],
},
],
},
{
label: '汇总响应',
img: 'https://oss.real-bot.cn/web/om/workflow/response_summary.png',
time: 0,
content: '汇总响应-1',
visible: false,
children: [
{
label: '输出',
img: 'https://oss.real-bot.cn/web/om/workflow/output.png',
time: 0,
content: '输出-2',
visible: false,
},
],
},
])
</script>
<style lang="scss" scoped>
.line-tree__node-header {
display: flex;
align-items: center;
line-height: 20px;
margin: 6px;
}
.line-tree__node-content {
padding: 12px;
width: 100%;
margin: 12px 0;
border-radius: 6px;
cursor: auto;
background-color: var(--el-color-primary-light-9);
color: var(--el-text-color-primary);
}
</style>隐藏源代码
原有功能
因为ElLineTree本是通过css修改而来，所以ElTree的功能都保留
Root1
Root2
vue
<template>
<el-line-tree
style="max-width: 600px"
:props="props"
:load="loadNode"
lazy
show-checkbox
line-color="var(--el-border-color)"
:icon-props="{ color: 'var(--el-border-color)' }"
@check-change="handleCheckChange"
/>
</template>
<script lang="ts" setup>
interface Tree {
name: string
}
let count = 1
const props = {
label: 'name',
children: 'zones',
}
const handleCheckChange = (
data: Tree,
checked: boolean,
indeterminate: boolean
) => {
console.log(data, checked, indeterminate)
}
const loadNode = (node, resolve) => {
if (node.level === 0) {
return resolve([{ name: 'Root1' }, { name: 'Root2' }])
}
if (node.level > 3) return resolve([])
let hasChild = false
if (node.data.name === 'region1') {
hasChild = true
} else if (node.data.name === 'region2') {
hasChild = false
} else {
hasChild = Math.random() > 0.5
}
setTimeout(() => {
let data: Tree[] = []
if (hasChild) {
data = [
{
name: `zone${count++}`,
},
{
name: `zone${count++}`,
},
]
} else {
data = []
}
resolve(data)
}, 500)
}
</script>隐藏源代码
过滤
这里不能使用ElTree组件自带的filter方法,由于调用ElTree的filter方法后，本质其实是对数据添加了visible从而控制节点的显示隐藏，目前的样式并不适配，会出现多余的一条竖线。
但是可以使用如下方案
Level one 1
Level two 1-1
Level three 1-1-1
Level three 1-1-2
Level one 2
Level two 2-1
Level two 2-2
Level one 3
Level two 3-1
Level two 3-2
vue
<template>
<el-input
v-model="filterText"
style="margin-bottom: 8px"
placeholder="Filter keyword"
/>
<el-line-tree style="max-width: 600px" :data="data" default-expand-all />
</template>
<script lang="ts" setup>
import { ref, watch } from 'vue'
const filterText = ref('')
const getData = () => {
return [
{
id: 1,
label: 'Level one 1',
children: [
{
id: 4,
label: 'Level two 1-1',
children: [
{
id: 9,
label: 'Level three 1-1-1',
},
{
id: 10,
label: 'Level three 1-1-2',
},
],
},
],
},
{
id: 2,
label: 'Level one 2',
children: [
{
id: 5,
label: 'Level two 2-1',
},
{
id: 6,
label: 'Level two 2-2',
},
],
},
{
id: 3,
label: 'Level one 3',
children: [
{
id: 7,
label: 'Level two 3-1',
},
{
id: 8,
label: 'Level two 3-2',
},
],
},
]
}
const filter = (data: any, keyword: string) => {
if (!keyword) return data
return data.reduce((acc: any, node: any) => {
const filteredChildren = node.children ? filter(node.children, keyword) : []
const isMatched = node.label.includes(keyword)
if (isMatched || filteredChildren.length > 0) {
acc.push({
...node,
children: filteredChildren.length > 0 ? filteredChildren : undefined,
})
}
return acc
}, [])
}
watch(filterText, (val) => {
data.value = filter(getData(), val)
})
const data = ref(getData())
</script>隐藏源代码
API
属性
其他相关的 API 属性，请参考 ElTree 即可，剩下是 LineTree 组件独有的 API 属性
| 属性名 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| line-radius | 线的弧度 | String | 0px |
| line-color | 线的颜色 | String | - |
| collapse-width | 当自定义 collapse 内容时，需要设置 collapse 的宽度值，为了调整连线的位置 | String | 15px |
| show-content-line | 自定义 content 后，子内容的高度可能变化，添加一条线会更好 | Boolean | false |
| icon-props | 自定义图标的属性 | Object | - |
| expand-on-click-icon | 是否在点击节点前的 icon 时展开或者收缩节点， 默认值为 true,可以搭配expand-on-click-node使用 | Boolean | true |
Slots
| 事件名 | 说明 |
|---|---|
| collapse | 自定义折叠器 |
| default | 自定义节点内容 |
Exposes
| 名称 | 详情 | 类型 |
|---|---|---|
| treeInstance | ElTree 组件实例 | - |