1、多级联动的回显问题
- 想要回显成这个样子,需要后台给这三个id,然后初始时走三个接口;以此类推,可以走多个接口,获取多级。
- 上代码
<el-cascader v-model="form.area" placeholder="请选择" clearable ref="refArea"
:options="areas" :show-all-levels="true" @change="handleChangeColumn"
@active-item-change="handleItemChange" filterable>
</el-cascader>
let params = {};
params = {
id: '1'
}
areaTreeList(params).then(res => {
if (res.data.code == 0) {
var ones1 = res.data.data.list
this.areas = ones1.map((value, i) => {
return {
value: value.id,
label: value.name,
children: []
}
})
//第二个
params = {
id: areas.substring(0,2)
}
areaTreeList(params).then(res => {
if (res.data.code == 0) {
var ones2 = res.data.data.list
this.areas.map((value, i) => {
if (value.value == areas.substring(0,2)) { // 遍历数据源=选中
if (!value.children.length) {
value.children = ones2.map((value, i) => {
return {
value: value.id,
label: value.name,
children: []
}
})
}
}
})
//第三个
params = {
id: areas.substring(0,4)
}
areaTreeList(params).then(res => {
if (res.data.code == 0) {
var ones3 = res.data.data.list
this.areas.map((value, i) => {
if (value.value == areas.substring(0,2)) {
value.children.map((value, i) => {
if (value.value === areas.substring(0,4)) {
if (!value.children.length) {
value.children = ones3.map((value, i) => {
return {
value: value.id,
label: value.name,
}
})
}
}
})
}
})
}
})
}
})
}
})