elementUI el-cascader如何优雅的处理多数据按需加载?

题目描述

我这里有一个城市级联选择的功能,但是在用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如何处理多数据按需加载。

回复
阅读 15.2k
2 个回答

这个方法已经很方便了,用你那个写法只要res.body.data返回的children里面的子项还包含children,选择子项依然会触发方法change,不知道你 这里只能处理第二级的数据,却没有办法处理第三、四级数据 是哪里得到的结论
还有官方示例里面的setTimeout是用来模拟回调延时的,实际使用中就没必要用了

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题
宣传栏