vant Cascader 级联选择 异步加载

找你好多文章,没用合适的  直接上代码 
 

 <van-field
                    v-model="fieldValue"
                    is-link
                    readonly
                    label="地区"
                    placeholder="请选择所在地区"
                    @click="show3 = true"
            ></van-field>
            <van-popup v-model="show3" round position="bottom">
                <van-cascader
                        v-model="cascaderValue"
                        title="请选择所在地区"
                        :options="options"
                        @close="show3 = false"
                        @change="onChange"
                        @finish="onFinish"
                ></van-cascader>
            </van-popup>
 loadNextLevelData(label) {
                let eiInfo = new EiInfo();
                eiInfo.set("inqu_status-0-node", label); // 使用传入的 label 作为请求参数
                return new Promise((resolve, reject) => {
                    EiCommunicator.send("YJGZ0100", "query", eiInfo, {
                        onSuccess: (ei) => {
                            if (ei.status !== -1) {
                                let res = ei.getBlock(label).getMappedRows(); // 提取数据
                                console.log(res, '11111111111111111111111')
                                let children = res.map(item => ({
                                    text: item.text,
                                    value: item.label,
                                    children: item.leaf === '1' ? null : [] // 如果是最后一级节点,children 设置为 null
                                }));
                                resolve(children); // 返回数据
                            } else {
                                reject(new Error("Failed to retrieve data.")); // 处理错误
                            }
                        },
                        onFailure: (error) => {
                            reject(error); // 处理请求失败
                        }
                    });
                });
            },
            onChange({value}) {
                this.loadNextLevelData(value)
                    .then((children) => {
                        console.log("Fetched children:", children); // 调试输出
                        if (children && children.length > 0) {
                            let targetOption = this.findOptionByLabel(this.options, value); // 找到对应选项
                            if (targetOption) {
                                targetOption.children = children; // 更新选项中的子级数据
                            }
                        }
                    })
                    .catch((error) => {
                        console.error("Error fetching children:", error); // 捕捉错误
                    });
            },
            findOptionByLabel(options, label) {
                // 递归查找选项,找到匹配的标签
                for (let option of options) {
                    if (option.value === label) {
                        return option; // 找到匹配项
                    }
                    if (option.children && option.children.length > 0) {
                        let found = this.findOptionByLabel(option.children, label); // 递归查找子选项
                        if (found) {
                            return found; // 返回找到的项
                        }
                    }
                }
                return null; // 未找到
            },

  • 2
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
Vant级联选择器组件可以通过异步加载来实现动态加载级联数据。具体实现方法如下: 1. 在选择器组件中设置 `:load-data="loadData"` 属性,指定加载数据的方法。 2. 实现 `loadData` 方法,该方法接收一个参数 `item`,表示当前需要加载子级数据的选项。该方法应返回一个 Promise 对象,在 Promise 对象的回调函数中,将子级数据作为 Promise 对象的返回值返回。 3. 在 `loadData` 方法中,根据 `item` 的值,异步加载子级数据,并将子级数据作为 Promise 对象的返回值。 4. 在 `loadData` 方法中,如果需要在加载数据时显示 loading 状态,可以使用 Vant 的 Loading 组件,在加载数据前调用 `this.$toast.loading()` 方法显示 loading 状态,在加载完成后调用 `this.$toast.clear()` 方法隐藏 loading 状态。 下面是一个示例代码: ```html <van-cascade-picker :data="cascadeData" :load-data="loadData" ></van-cascade-picker> ``` ```js export default { data() { return { cascadeData: [ { value: '1', label: '一级选项' } ] } }, methods: { loadData(item) { // 显示 loading 状态 this.$toast.loading({ message: '加载中...', duration: 0 }); // 异步加载子级数据 return new Promise(resolve => { setTimeout(() => { const childData = [ { value: '1-1', label: '二级选项' } ]; // 隐藏 loading 状态 this.$toast.clear(); // 将子级数据作为 Promise 对象的返回值返回 resolve(childData); }, 1000); }); } } } ```

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值