因為項目設計需要,Cascader 級聯選擇器不符合項目的設計,但同時需要有關聯功能,故是以使用兩個el-select做關聯處理
求解怎麼讓我在我選中 第一級 選項的時候 第二級 動态自動顯示處理過後數組的第一項
html:
v-model="addPopupDepend.selectValuelev1"
placeholder="請選擇"
>
v-for="item in addPopupDepend.options"
:key="item.value"
:label="item.label"
:value="item.value"
>
v-model="addPopupDepend.selectValuelev2"
placeholder="請選擇"
>
v-for="item in addLev2Linkage"
:key="item.value"
:label="item.label"
:value="item.value"
>
js:
data(){
return{
addPopupDepend:{ // ! 添加系時需要的東西
options: [
{
value:'test1',
label:'test1',
children:[
value:'123',
label:'123'
]
},
{
value:'test2',
label:'test2'
children:[
value:'456'
label:'456'
]
}
],
// * 一級下拉框
selectValuelev1:'',
// * 二級下拉框
selectValuelev2:'',
},
}
},
computed: {
// * 關聯
addLev2Linkage(){
if(this.addPopupDepend.selectValuelev1 == '') return []
else return this.addPopupDepend.options.filter((val,index)=>{return val.value == this.addPopupDepend.selectValuelev1})[0].children
},
}
因為項目中還有其他類似這種的雙級聯el-select
是以最好不要寫成像這樣無法複用的函數
methods:{
setval(){
this.addPopupDepend.selectValuelev2 = addLev2Linkage[0].value
}
}
求解怎麼設計處理函數