前言
我這里分享的是Cascader 級聯(lián)選擇器中的多選、以及如何自定義props的使用詳解
1.使用Cascader 級聯(lián)選擇器
效果
代碼
<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: '新疆維吾爾族自治區(qū)',
children: [
{ value: 22, label: '烏魯木齊' },
{ value: 23, label: '克拉瑪依' }
]
}]
}]
};
}
};
</script>
這里在優(yōu)化一下，將option放置外部引入，如果是通過后端傳入的數(shù)據(jù)這里也可以直接賦值給option
創(chuàng)建一個regin.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: '新疆維吾爾族自治區(qū)',
children: [
{ value: 22, label: '烏魯木齊' },
{ value: 23, label: '克拉瑪依' }
]
}]
}]
export default arr
頁面中使用
將rogin.js引入，然后在生命周期函數(shù)中賦值給options、這里如果數(shù)據(jù)是要通過后端傳輸?shù)脑捑驮谏芷诤瘮?shù)中去調(diào)用接口的方法、然后在將后端傳入的值賦給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>
到這里就完成了級聯(lián)選擇器的初步使用
2.自定義props
先說一下我遇到時的業(yè)務場景：
我需要渲染一個列表，但是這個列表里面的字段并不是value作為值、label為標簽、子集也不是叫children
例如：
[{
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: '新疆維吾爾族自治區(qū)',
child: [
{ regionValue: 22, regionLabel: '烏魯木齊' },
{ regionValue: 23, regionLabel: '克拉瑪依' }
]
}]
}]
例如這種不是組件本身默認值的字段
這個時候就需要使用自定義props
先看官方文檔的說明
這里我們就是要用到value、label、children
先在組件中定義:props="props"
<el-cascader
:options="options"
:props="props"
collapse-tags
clearable></el-cascader>
然后修改data里面
data() {
return {
props: { multiple: true,label:'regionLabel',value:'regionValue',children:'child' },
options: []
};
},
然后在查看效果
成功！
那么問題又來了，目前是必須要所有字段統(tǒng)一，簡單來說就是無論在哪一級菜單值必須要叫regionValue，或者label必須為標簽，那如果數(shù)據(jù)長成這樣呢各級菜單的標簽與值的字段都不一樣
例如：
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: '新疆維吾爾族自治區(qū)',
child: [
{ regionValue: 22, regionLabel: '烏魯木齊' },
{ regionValue: 23, regionLabel: '克拉瑪依' }
]
}]
}]
一級菜單與二級菜單的值分別顯示為Value、regionValue,標簽為Label、regionLabel,這種字段不一的情況會導致其中一個顯示有問題。
如果以一級菜單的字段做匹配的話，那么二級菜單就會不顯示，這個時候就需要對數(shù)據(jù)進行二次處理，目的是把所有級的字段統(tǒng)一比如說值就是顯示為value,標簽就是為label。
定義一個方法為disposeData，并且在生命周期函數(shù)中掛載，我用的方法是將一級菜單為匹配字段，將二級的字段全部替換為一級菜單文章來源：http://www.zghlxwxcb.cn/news/detail-599002.html
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}
})
}
再看看效果
成功！文章來源地址http://www.zghlxwxcb.cn/news/detail-599002.html
完整代碼
<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>
到了這里，關于vue+element 多選級聯(lián)選擇器自定義props的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網(wǎng)！
