el-cascader 联级选择器
2019-12-19 本文已影响0人
是嘻嘻呀
需求:根据公司id获取部门
数据:后台的接口获取公司列表根据公司id获取部门列表
options是一个数组用来渲染选择器的数组,[ {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() { //获取后台数据,写成需要的的数据结构
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"] 一次为一级二级的值
}
}
}
</script>
回显和设置默认值的时候按照获取到的值的格式
this.cascaderValue = ["2","3"]