Tree树型选择框
约 663 字大约 2 分钟
2025-02-06
基础用法
vue2
vue3
<template>
<tvue-form :option="option"></tvue-form>
</template>
<script setup>
import { ref } from 'vue';
const option = ref({
column: [{
label: '树型选择框',
prop: 'tree',
type: 'tree',
dicData: [{
label: '字典1',
value: 0,
children: [{
label: '字典3',
value: 2
}]
}, {
label: '字典2',
value: 1
}]
}]
});
</script>默认值
vue2
vue3
`value`属性可以提供一个初始化的默认值
<template>
<tvue-form :option="option"></tvue-form>
</template>
<script setup>
import { ref } from 'vue';
const option = ref({
column: [
{
label: '树型选择框',
prop: 'tree',
type: 'tree',
dicData: [
{
label: '字典1',
value: 0,
children: [
{
label: '字典3',
value: 2
}
]
},
{
label: '字典2',
value: 1
}
],
value: 0
}
]
});
</script>禁用状态
vue2
vue3
通过`disabled`属性指定是否禁用
<template>
<tvue-form :option="option"></tvue-form>
</template>
<script setup>
import { ref } from 'vue';
const option = ref({
column: [
{
label: '树型选择框',
prop: 'tree',
type: 'tree',
dicData: [
{
label: '字典1',
value: 0,
children: [
{
label: '字典3',
value: 2
}
]
},
{
label: '字典2',
value: 1
}
],
disabled: true
}
]
});
</script>禁用选项
vue2
vue3
返回的字典中数据配置`disabled`属性指定是否禁用
<template>
<tvue-form :option="option"></tvue-form>
</template>
<script setup>
import { ref } from 'vue';
const option = ref({
column: [
{
label: '树型选择框',
prop: 'tree',
type: 'tree',
dicData: [
{
label: '字典1',
value: 0,
disabled: true,
children: [
{
label: '字典3',
value: 2
}
]
},
{
label: '字典2',
value: 1
}
]
}
]
});
</script>可清空
vue2
vue3
使用`clearable`属性即可得到一个可清空的输入框,默认为`true`
<template>
<tvue-form :option="option"></tvue-form>
</template>
<script setup>
import { ref } from 'vue';
const option = ref({
column: [
{
label: '树型选择框',
prop: 'tree',
type: 'tree',
clearable: false,
dicData: [
{
label: '字典1',
value: 0,
children: [
{
label: '字典3',
value: 2
}
]
},
{
label: '字典2',
value: 1
}
]
}
]
});
</script>辅助语
vue2
vue3
配置下拉数据中`desc`字段
<template>
<tvue-form :option="option"></tvue-form>
</template>
<script setup>
import { ref } from 'vue';
const option = ref({
column: [
{
label: '树型选择框',
prop: 'tree',
type: 'tree',
dicData: [
{
label: '字典1',
value: 0,
desc: '字典描述',
children: [
{
label: '字典3',
value: 2
}
]
},
{
label: '字典2',
value: 1
}
]
}
]
});
</script>下拉框样式
.popperClass .el-tree-node__content{
background-color: rgba(0,0,0,.2);
}vue2
vue3
`popperClass`属性配置样式的`class`名字
<template>
<tvue-form :option="option"></tvue-form>
</template>
<script setup>
import { ref } from 'vue';
const option = ref({
column: [{
label: '树型选择框',
prop: 'tree',
type: 'tree',
popperClass: 'popperClass',
dicData: [{
label: '字典1',
value: 0,
children: [{
label: '字典3',
value: 2
}]
}, {
label: '字典2',
value: 1
}]
}]
});
</script>字典属性
指定标签文本和值，默认为label和value
vue2
vue3
配置`props`属性来指定标签文本和值，默认为`label`和`value`
<template>
<tvue-form :option="option"></tvue-form>
</template>
<script setup>
import { ref } from 'vue';
const option = ref({
column: [
{
label: '树形下拉框',
prop: 'tree',
type: 'tree',
props: {
label: 'name',
value: 'code',
children: 'list'
},
dicData: [
{
name: '字典1',
code: 0,
list: [
{
name: '字典3',
code: 2
}
]
},
{
name: '字典2',
code: 1
}
]
}
]
});
</script>网络字典
更多用法参考表单数据字典
vue2
vue3
配置`dicUrl`指定后台接口的地址
<template>
<tvue-form :option="option"></tvue-form>
</template>
<script setup>
import { ref } from 'vue';
const option = ref({
column: [
{
label: '树形下拉框',
prop: 'tree',
type: 'tree',
props: {
label: 'name',
value: 'code'
},
dicUrl: 'https://cli.avuejs.com/api/area/getProvince'
}
]
});
</script>基础多选
vue2
vue3
设置`multiple`属性即可启用多选，此时值为当前选中值所组成的数组。默认情况下选中值会以 Tag 的形式展现，你也可以设置`collapseTags`属性将它们合并为一段文字,同时配合`maxCollapseTags`最大显示个数和`collapseTagsTooltip`是否折叠提示
<template>
<tvue-form v-model="form"
:option="option"></tvue-form>
</template>
<script setup>
import { ref } from 'vue';
const dicData = [
{
label: '字典1',
value: 0,
children: [
{
label: '字典3',
value: 2
}
]
},
{
label: '字典2',
value: 1
}
];
const form = ref({
tree: [0, 1, 2, 3, 4]
});
const option = ref({
column: [
{
label: '多选',
prop: 'tree',
type: 'tree',
multiple: true,
dicData: dicData
},
{
label: '多选',
prop: 'tree',
type: 'tree',
multiple: true,
collapseTags: true,
maxCollapseTags: 3,
collapseTagsTooltip: true,
dicData: dicData
}
]
});
</script>选择任意级别
vue2
vue3
当属性`checkStrictly`为`true` 时，任何节点都可以被选择，否则只有子节点可被选择
<template>
<tvue-form :option="option"></tvue-form>
</template>
<script setup>
import { ref } from 'vue';
const option = ref({
column: [{
label: '树型选择框',
prop: 'tree',
type: 'tree',
checkStrictly: true,
dicData: [{
label: '字典1',
value: 0,
children: [{
label: '字典3',
value: 2
}]
}, {
label: '字典2',
value: 1
}]
}, {
label: '树型选择框1',
prop: 'tree1',
type: 'tree',
multiple: true,
checkStrictly: true,
dicData: [{
label: '字典1',
value: 0,
children: [{
label: '字典3',
value: 2
}]
}, {
label: '字典2',
value: 1
}]
}]
});
</script>基础过滤
vue2
vue3
filterable 属性即可启用筛选功能
<template>
<tvue-form :option="option"></tvue-form>
</template>
<script setup>
import { ref } from 'vue';
const option = ref({
column: [
{
label: '多选',
prop: 'tree',
type: 'tree',
filterable: true,
dicData: [
{
label: '字典1',
value: 0,
children: [
{
label: '字典3',
value: 2
}
]
},
{
label: '字典2',
value: 1
}
]
},
{
label: '父类不可选',
prop: 'tree1',
type: 'tree',
parent: false,
dicData: [
{
label: '字典1',
value: 0,
children: [
{
label: '字典3',
value: 2,
children: [
{
label: '字典4',
value: 3
}
]
}
]
},
{
label: '字典2',
value: 1
}
]
}
]
});
</script>手风琴模式
vue2
vue3
设置`accordion`对于同一级的节点，每次只能展开一个
<template>
<tvue-form :option="option"></tvue-form>
</template>
<script setup>
import { ref } from 'vue';
const option = ref({
column: [{
label: '树型选择框',
prop: 'tree',
type: 'tree',
accordion: true,
dicData: [{
label: '字典1',
value: 0,
children: [{
label: '字典3',
value: 2
}]
}, {
label: '字典2',
value: 1,
children: [{
label: '字典4',
value: 3
}]
}]
}]
});
</script>节点事件
vue2
vue3
<template>
<tvue-form :option="option"></tvue-form>
</template>
<script setup>
import { ref } from 'vue';
import { ElMessage } from 'element-plus';
const dicData = [
{
label: '字典1',
value: 0,
children: [
{
label: '字典3',
value: 2
}
]
},
{
label: '字典2',
value: 1
}
];
const option = ref({
column: [
{
label: '多选',
prop: 'tree',
type: 'tree',
multiple: true,
nodeClick: (data, node, nodeComp) => {
ElMessage.success(JSON.stringify(data));
},
checked: (checkedNodes, checkedKeys, halfCheckedNodes, halfCheckedKeys) => {
ElMessage.success(JSON.stringify(checkedKeys));
},
dicData: dicData
}
]
});
</script>自定义模板
vue2
vue3
配置`prop`名称加`Type`卡槽开启即可自定义下拉框的内容,`typeformat`配置回显的内容,但是你提交的值还是`value`并不会改变
<template>
<tvue-form :option="option"
v-model="form">
<template #code-type="{ item, value, label }">
<span>{{ item }}</span>
</template>
</tvue-form>
</template>
<script setup>
import { ref } from 'vue';
const baseUrl = 'https://cli.avuejs.com/api/area';
const form = ref({});
const option = ref({
column: [{
label: '单选',
prop: 'code',
type: 'tree',
props: {
label: 'name',
value: 'code'
},
dicUrl: `${baseUrl}/getProvince`,
typeformat (item, label, value) {
return `值:${item[label]}-名:${item[value]}`;
},
rules: [
{
required: true,
message: '请选择省份',
trigger: 'blur'
}
]
}, {
label: '多选',
prop: 'codes',
type: 'tree',
props: {
label: 'name',
value: 'code'
},
multiple: true,
dicUrl: `${baseUrl}/getProvince`,
typeformat (item, label, value) {
return `值:${item[label]}-名:${item[value]}`;
},
rules: [
{
required: true,
message: '请选择省份',
trigger: 'blur'
}
]
}]
});
</script>懒加载
vue2
vue3
`cacheData`懒加载节点的缓存数据，结构与数据相同，用于获取未加载数据的标签
<template>
<tvue-form :option="option"></tvue-form>
</template>
<script setup>
import { ref } from 'vue';
import axios from 'axios';
const baseUrl = 'https://cli.avuejs.com/api/area';
const option = ref({
column: [
{
label: '懒加载',
prop: 'id',
type: 'tree',
dicUrl: `${baseUrl}/getProvince?id={{key}}`,
props: {
label: 'name',
value: 'code'
},
lazy: true,
cacheData: [
{
name: '未加载数据',
code: -1
}
],
treeLoad: (node, resolve) => {
const stop_level = 2;
const level = node.level;
const data = node.data || {};
const code = data.code;
let list = [];
const callback = () => {
resolve((list || []).map(ele => ({
...ele,
leaf: level >= stop_level
})));
};
if (level === 0) {
axios.get(`${baseUrl}/getProvince`).then(res => {
list = res.data;
callback();
});
} else if (level === 1) {
axios.get(`${baseUrl}/getCity/${code}`).then(res => {
list = res.data;
callback();
});
} else if (level === 2) {
axios.get(`${baseUrl}/getArea/${code}`).then(res => {
list = res.data;
callback();
});
} else {
list = [];
callback();
}
}
}
]
});
</script>