需求：根據(jù)公司id獲取部門
數(shù)據(jù)：后臺(tái)的接口獲取公司列表根據(jù)公司id獲取部門列表
options是一個(gè)數(shù)組用來(lái)渲染選擇器的數(shù)組，[ {value:'', label: '',children: []} ]
image.png
<el-cascader
separator=">"
@change=“change
v-model="cascaderValue"
:options="options"></el-cascader>
<script>
export default {
data() {
return {
cascaderValue: []
}
},
async mounted() { //獲取后臺(tái)數(shù)據(jù)轻绞，寫成需要的的數(shù)據(jù)結(jié)構(gòu)
await getListCompanys().then(res => {
let data = res.data.lists.map(item => ({
...item,
value:item.id,
label:item.name,
children:[]
}))
data.map((item, index)=> {
getListDepartments({params:{companyId:item.id}}).then(res => {
data[index].children = res.data.lists.map(item => ({
...item,
value:item.id,
label:item.name,
}))
})
})
this.options = data
})
}每界，
methods:{
change(v) {
console.log(v)// ["2","3"] 一次為一級(jí)二級(jí)的值
}
}
}
</script>
回顯和設(shè)置默認(rèn)值的時(shí)候按照獲取到的值的格式
this.cascaderValue = ["2","3"]
