foreword
What I share here is the multi-selection in the Cascader cascading selector and how to customize the use of props
1. Use Cascader cascade selector
Effect
the code
<div class="block">
<span class="demonstration">默认显示所有Tag</span>
<el-cascader
:options="options"
:props="props"
clearable></el-cascader>
</div>
<div class="block">
<span class="demonstration">折叠展示Tag</span>
<el-cascader
:options="options"
:props="props"
collapse-tags
clearable></el-cascader>
</div>
<script>
export default {
data() {
return {
props: {
multiple: true },
options: [{
value: 1,
label: '东南',
children: [{
value: 2,
label: '上海',
children: [
{
value: 3, label: '普陀' },
{
value: 4, label: '黄埔' },
{
value: 5, label: '徐汇' }
]
}, {
value: 7,
label: '江苏',
children: [
{
value: 8, label: '南京' },
{
value: 9, label: '苏州' },
{
value: 10, label: '无锡' }
]
}, {
value: 12,
label: '浙江',
children: [
{
value: 13, label: '杭州' },
{
value: 14, label: '宁波' },
{
value: 15, label: '嘉兴' }
]
}]
}, {
value: 17,
label: '西北',
children: [{
value: 18,
label: '陕西',
children: [
{
value: 19, label: '西安' },
{
value: 20, label: '延安' }
]
}, {
value: 21,
label: '新疆维吾尔族自治区',
children: [
{
value: 22, label: '乌鲁木齐' },
{
value: 23, label: '克拉玛依' }
]
}]
}]
};
}
};
</script>
Here is an optimization, place the option externally and import it. If the data is passed in through the backend, you can also directly assign it to the option
to create a region.js
const arr = [{
value: 1,
label: '东南',
children: [{
value: 2,
label: '上海',
children: [
{
value: 3, label: '普陀' },
{
value: 4, label: '黄埔' },
{
value: 5, label: '徐汇' }
]
}, {
value: 7,
label: '江苏',
children: [
{
value: 8, label: '南京' },
{
value: 9, label: '苏州' },
{
value: 10, label: '无锡' }
]
}, {
value: 12,
label: '浙江',
children: [
{
value: 13, label: '杭州' },
{
value: 14, label: '宁波' },
{
value: 15, label: '嘉兴' }
]
}]
}, {
value: 17,
label: '西北',
children: [{
value: 18,
label: '陕西',
children: [
{
value: 19, label: '西安' },
{
value: 20, label: '延安' }
]
}, {
value: 21,
label: '新疆维吾尔族自治区',
children: [
{
value: 22, label: '乌鲁木齐' },
{
value: 23, label: '克拉玛依' }
]
}]
}]
export default arr
Import rogin.js into the page
, and then assign values to options in the lifecycle function. Here, if the data is to be transmitted through the backend, call the method of the interface in the lifecycle function, and then pass in the value from the backend Assigned to options.
<template>
<div class="OrderDispose">
<div class="block">
<span class="demonstration">折叠展示Tag</span>
<el-cascader
:options="options"
:props="props"
collapse-tags
clearable></el-cascader>
</div>
</div>
</template>
<script>
import rogin from '@/assets/region'
export default {
data() {
return {
props: {
multiple: true },
options: []
};
},
mounted(){
this.options = rogin
}
}
</script>
<style>
.demonstration{
margin-right: 10px;
}
</style>
At this point, the initial use of the cascade selector is completed
2. Custom props
Let me talk about the business scenario I encountered first:
I need to render a list, but the fields in this list are not value as the value, label as the label, and the subset is not called children.
For example:
[{
regionValue: 1,
regionLabel: '东南',
child: [{
regionValue: 2,
regionLabel: '上海',
child: [
{
regionValue: 3, regionLabel: '普陀' },
{
regionValue: 4, regionLabel: '黄埔' },
{
regionValue: 5, regionLabel: '徐汇' }
]
}, {
regionValue: 7,
regionLabel: '江苏',
child: [
{
regionValue: 8, regionLabel: '南京' },
{
regionValue: 9, regionLabel: '苏州' },
{
regionValue: 10, regionLabel: '无锡' }
]
}, {
regionValue: 12,
regionLabel: '浙江',
child: [
{
regionValue: 13, regionLabel: '杭州' },
{
regionValue: 14, regionLabel: '宁波' },
{
regionValue: 15, regionLabel: '嘉兴' }
]
}]
}, {
regionValue: 17,
regionLabel: '西北',
child: [{
regionValue: 18,
regionLabel: '陕西',
child: [
{
regionValue: 19, regionLabel: '西安' },
{
regionValue: 20, regionLabel: '延安' }
]
}, {
regionValue: 21,
regionLabel: '新疆维吾尔族自治区',
child: [
{
regionValue: 22, regionLabel: '乌鲁木齐' },
{
regionValue: 23, regionLabel: '克拉玛依' }
]
}]
}]
For example, this kind of field is not the default value of the component itself.
At this time, you need to use custom props
to read the description of the official document.
Here we need to
define the value, label, and children in the component first.:props="props"
<el-cascader
:options="options"
:props="props"
collapse-tags
clearable></el-cascader>
Then modify the data inside
data() {
return {
props: {
multiple: true,label:'regionLabel',value:'regionValue',children:'child' },
options: []
};
},
Then check the effect
Success!
Then the problem comes again. At present, all fields must be unified. Simply put, no matter which level the menu value must be called regionValue, or labelmust be a label, what if the data looks like this
各级菜单的标签与值的字段都不一样
For example:
const arr = [{
Value: 1,
Label: '东南',
child: [{
regionValue: 2,
regionLabel: '上海',
child: [
{
regionValue: 3, regionLabel: '普陀' },
{
regionValue: 4, regionLabel: '黄埔' },
{
regionValue: 5, regionLabel: '徐汇' }
]
}, {
regionValue: 7,
regionLabel: '江苏',
child: [
{
regionValue: 8, regionLabel: '南京' },
{
regionValue: 9, regionLabel: '苏州' },
{
regionValue: 10, regionLabel: '无锡' }
]
}, {
regionValue: 12,
regionLabel: '浙江',
child: [
{
regionValue: 13, regionLabel: '杭州' },
{
regionValue: 14, regionLabel: '宁波' },
{
regionValue: 15, regionLabel: '嘉兴' }
]
}]
}, {
Value: 17,
Label: '西北',
child: [{
regionValue: 18,
regionLabel: '陕西',
child: [
{
regionValue: 19, regionLabel: '西安' },
{
regionValue: 20, regionLabel: '延安' }
]
}, {
regionValue: 21,
regionLabel: '新疆维吾尔族自治区',
child: [
{
regionValue: 22, regionLabel: '乌鲁木齐' },
{
regionValue: 23, regionLabel: '克拉玛依' }
]
}]
}]
The values of the first-level menu and the second-level menu are displayed as Value, regionValue, and the labels are Label, regionLabel. This kind of field difference will cause a problem in one of the displays. If the fields of the first-level menu are used for matching, then the second-level menu will not be displayed. At this time, the data needs to be processed twice .
The purpose is to unify all the first-level fields . Define a method as disposeData, and mount it in the life cycle function. The method I use is to use the first-level menu as a matching field, and replace all the second-level fields with the first-level menuvaluelabel
disposeData(){
let children = []
this.options.forEach((item,index) => {
item.child.forEach((Item,Index) => {
children[Index] = {
"Value" : Item.regionValue,"Label" : Item.regionLabel}
})
this.options[index] = {
"Value":item.Value,"Label":item.Label,"child":children}
})
}
Look at the effect again
Success!
full code
<template>
<div class="OrderDispose">
<div class="block">
<span class="demonstration">折叠展示Tag</span>
<el-cascader
:options="options"
:props="props"
collapse-tags
clearable></el-cascader>
</div>
</div>
</template>
<script>
import rogin from '@/assets/region'
export default {
data() {
return {
props: {
multiple: true,label:'Label',value:'Value',children:'child' },
options: []
}
},
methods:{
disposeData(){
let children = []
this.options.forEach((item,index) => {
item.child.forEach((Item,Index) => {
children[Index] = {
"Value" : Item.regionValue,"Label" : Item.regionLabel}
})
this.options[index] = {
"Value":item.Value,"Label":item.Label,"child":children}
})
}
},
mounted(){
this.options = rogin
this.disposeData()
}
}
</script>