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