Tree 树结构
用于树结构展开。
基础用法
控制台
expandeds: [
"1",
"2"
]查看代码
vue
<template>
<demo-container>
<gov-tree v-model:expandeds="expandeds" :data="treeData" />
<template #console>expandeds: {{ expandeds }}</template>
</demo-container>
</template>
<script setup>
import { ref } from "vue";
import treeData from "./treeData.js";
const expandeds = ref(["1", "2"]);
</script>js
const treeData = [
{
id: "1",
label: "Node 1",
desc: "树木",
children: [
{
id: "1-1",
label: "Node 1-1",
desc: "松树",
children: [
{ id: "1-1-1", label: "Node 1-1-1", desc: "小叶松树" },
{ id: "1-1-2", label: "Node 1-1-2", desc: "东北大果松" },
],
},
{
id: "1-2",
label: "Node 1-2",
desc: "杨树",
children: [
{ id: "1-2-1", label: "Node 1-2-1", desc: "小白杨" },
],
},
],
},
{
id: "2",
label: "Node 2",
desc: "小草",
children: [
{
id: "2-1",
label: "Node 2-1",
desc: "忘忧草",
},
{
id: "2-2",
label: "Node 2-2",
desc: "兰草",
children: [
{ id: "2-2-1", label: "Node 2-2-1", desc: "小叶兰草" },
{ id: "2-2-2", label: "Node 2-2-2", desc: "长根茎兰草" },
],
},
],
},
{
id: "3",
label: "Node 3",
desc: "灌木",
},
];
export default treeData;修改icon
你可以分别设置，节点展开前、节点展开后、无子节点等状态的 Icon 。
查看代码
vue
<template>
<demo-container>
<gov-tree
v-model:expandeds="expandeds"
:data="treeData"
foldIcon="folder"
unfoldIcon="folder-opened"
nodeIcon="document"
/>
</demo-container>
</template>
<script setup>
import { ref } from "vue";
import treeData from "./treeData.js";
const expandeds = ref(["1", "2", "1-1", "1-2", "2-2"]);
</script>js
const treeData = [
{
id: "1",
label: "Node 1",
desc: "树木",
children: [
{
id: "1-1",
label: "Node 1-1",
desc: "松树",
children: [
{ id: "1-1-1", label: "Node 1-1-1", desc: "小叶松树" },
{ id: "1-1-2", label: "Node 1-1-2", desc: "东北大果松" },
],
},
{
id: "1-2",
label: "Node 1-2",
desc: "杨树",
children: [
{ id: "1-2-1", label: "Node 1-2-1", desc: "小白杨" },
],
},
],
},
{
id: "2",
label: "Node 2",
desc: "小草",
children: [
{
id: "2-1",
label: "Node 2-1",
desc: "忘忧草",
},
{
id: "2-2",
label: "Node 2-2",
desc: "兰草",
children: [
{ id: "2-2-1", label: "Node 2-2-1", desc: "小叶兰草" },
{ id: "2-2-2", label: "Node 2-2-2", desc: "长根茎兰草" },
],
},
],
},
{
id: "3",
label: "Node 3",
desc: "灌木",
},
];
export default treeData;自定义节点
自定义节点内容。
查看代码
vue
<template>
<demo-container>
<gov-tree v-model:expandeds="expandeds" :data="treeData">
<template #default="{ node }">
{{ node.desc }}
<span style="font-size: 12px">(编号id：{{ node.id }})</span>
</template>
</gov-tree>
</demo-container>
</template>
<script setup>
import { ref } from "vue";
import treeData from "./treeData.js";
const expandeds = ref([]);
</script>js
const treeData = [
{
id: "1",
label: "Node 1",
desc: "树木",
children: [
{
id: "1-1",
label: "Node 1-1",
desc: "松树",
children: [
{ id: "1-1-1", label: "Node 1-1-1", desc: "小叶松树" },
{ id: "1-1-2", label: "Node 1-1-2", desc: "东北大果松" },
],
},
{
id: "1-2",
label: "Node 1-2",
desc: "杨树",
children: [
{ id: "1-2-1", label: "Node 1-2-1", desc: "小白杨" },
],
},
],
},
{
id: "2",
label: "Node 2",
desc: "小草",
children: [
{
id: "2-1",
label: "Node 2-1",
desc: "忘忧草",
},
{
id: "2-2",
label: "Node 2-2",
desc: "兰草",
children: [
{ id: "2-2-1", label: "Node 2-2-1", desc: "小叶兰草" },
{ id: "2-2-2", label: "Node 2-2-2", desc: "长根茎兰草" },
],
},
],
},
{
id: "3",
label: "Node 3",
desc: "灌木",
},
];
export default treeData;Attributes
| 属性名 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
| data | 树形结构数据 | Array | — | — |
| expandeds | 展开的节点 ID 列表 | Array | — | — |
| paddingLeft | 子节点的缩进宽度 | String | — | "20px" |
| foldIcon | 折叠时的图标名称 | String | — | "caret-right" |
| unfoldIcon | 展开时的图标名称，如果设置，则图标旋转消失 | String | — | — |
| nodeIcon | 无子元素节点的图标名称 | String | — | null |
Events
| 事件名 | 说明 | 回调参数 |
|---|---|---|
| update:expandeds | 展开的节点 ID 列表更新时触发 | 新的展开节点 ID 列表 |
| toggle | 节点展开或收起时触发 | 新的展开节点 ID 列表，当前节点 |
| click | 节点被点击时触发 | 当前节点 |
Slots
| 插槽名 | 说明 | 作用域插槽 | 内容 |
|---|---|---|---|
| default | 默认插槽，用于自定义节点内容 | 是 | 提供了 node 和 isExpanded 作为作用域插槽属性 |