天天看點

element 下拉框關聯_element ui 使用 el-select做關聯動态綁定二級下拉框預設值

因為項目設計需要,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

}

}

求解怎麼設計處理函數