题目描述
我这里有一个城市级联选择的功能,但是在用el-cascader的时候,发现,按需加载数据的时候处理起来非常麻烦,官方也没有提供一个简介的方法,在网上页搜索的相关问题,没有找到满意的方案,不知道大家有没有简洁的方法。
相关代码
<el-cascader :options="list_linkage" :props="props" :clearable="true" :filterable="true" :change-on-select="true" @change="handleItemChange" v-model="form.pid"></el-cascader>
// 自定义 props
props : { label:'name', value:'index' }
// 函数
handleItemChange(val){
// val其实是数据的索引,由后端提供
const id = this.list_linkage[val].id;
const url = '/app/ctrol/action/' + id;
setTimeout(_ => {
// 这里只能处理第二级的数据,却没有办法处理第三、四级数据
this.$http.post(url, {}, {emulateJSON:true}).then((res)=>{
this.list_linkage[val].children = res.body.data;
});
}, 300);
}
补充说明
请看上面三张图,页面加载的完成的时候,会请求一下省数据【一级数据】,
点击一级数据【比如 天津市】,则请求二级数据,
点击二级数据【比如 和平区】,则请求三级数据,
依次类推 ...
数据格式为:
[
{
id: 1,
pid: 2,
name: '天津市',
index: 0,
children: [{
id: 11,
pid: 21,
name: '和平区',
index: 0,
children: [{
id: 111,
pid: 211,
name: '乡镇/街道',
index: 0,
children: [{}]
}]
}]
}
]
问题来了
当点击【天津市】,change方法只能获取到天津市的index:0, 更新children为:this.list_linkage[val].children = res.body.data
当点击【和平区】,change方法只能获取到和平区的index:0, 更新children为:this.list_linkage[val].children[val].children = res.body.data
依次下去,后端数据很好获取,但是前台数据却没办法处理,因为 change回掉方法里面的参数是props里面定义的value所对应的值,并不是 当前行 数据,所以 就没办法处理了……
期待的结果
大家有没有更好的办法,处理数据非常多的情况,优雅的使用el-cascader呢?
这里也不是拿来主义,想跟大家探讨一下,el-cascader如何处理多数据按需加载。
这个方法已经很方便了,用你那个写法只要
res.body.data
返回的children
里面的子项还包含children
,选择子项依然会触发方法change
,不知道你 这里只能处理第二级的数据,却没有办法处理第三、四级数据 是哪里得到的结论还有官方示例里面的
setTimeout
是用来模拟回调延时的,实际使用中就没必要用了