ElementUI el-cascader 多选 懒加载 回显问题

需要设置options与v-model绑定的值,原著懒加载回显方法有问题

1.回显数据的时候除了给v-model绑定的属性赋值以外,还要提供一个包含需要渲染的级联数据的options模板。
2.resolve(nodes) 返回的nodes为下一级要渲染的list列表数据,如果是回显已提供了options渲染模板但是不完整,则需要在后面懒加载的时候将返回的list数据和已存在的节点数据做对比,仅保留options中不存在的节点数据再把过滤后的节点resolve(nodes)。
链接:https://www.jianshu.com/p/1ff92ded424b
 

<el-cascader
                                    v-model="cascaderValue"
                                    :options="searchForm[0].datas"
                                    :props="searchForm[0].props"
                            ></el-cascader>


searchForm: [
                    {
                        type: 'Cascader',
                        label: '组织机构',
                        prop: 'cascaderValue',
                        showType: 'show',
                        // 级联选择器的配置项
                        datas: [
                        ],
                        props: {
                            multiple: true,checkStrictly: true , expandTrigger: 'click',             
                            lazy: true,
                            lazyLoad (node, resolve) {
                                // 节点的等级,根节点为0
                                debugger;
                                const {level} = node;
                                if (level === 0) {
                                    that.loading = true;

                                            
                       
                       
                       
                       
      that.R.forOperationPool.postJson('/mktPoolCampaign/qryOrgChildren', 
                  that.params).then(res => {
                       if(res.ok){
                                            let userJobList =                                                                                             
                                           res.resultObject.userJobList;
                                            let nodes = [];
                                            if(userJobList !== null && userJobList.length > 0) {
                                                for (let i = 0; i < userJobList.length; i++) {
                                                    nodes[i] = {
                                                        value: userJobList[i].bss_org_id,
                                                        label: userJobList[i].bss_org_name,
                                                        children:[]
                                                    };
                                                }
                                            }
                                            that.searchForm[0].datas=nodes;
                                            // 通过调用resolve将子节点数据返回,通知组件数据加载完成
                                            debugger;
                                            resolve(nodes);
                                        }
                                        that.loading = false;
                                    });
                                } else {
                                    that.loading = true;
                                    that.params.bssOrgId = node.value;

                                    that.R.forOperationPool.postJson('/mktPoolCampaign/qryOrgChildren', that.params).then(res => {
                                        if(res.ok){
                                            let orgs = res.resultObject.orgChildren;
                                            let list =[];
                                            var nodes = [];

                                            if(orgs !== null && orgs.length > 0) {
                                                for (let i = 0; i < orgs.length; i++) {
                                                    nodes[i] = {
                                                        value: orgs[i].bssOrgId,
                                                        label: orgs[i].bssOrgName,
                                                        children:[]
                                                    };
                                                }
                                            }
                                            debugger;
                                            if(node.hasChildren && node.children.length){
                                                nodes.forEach(item => {
                                                    let flag = true
                                                    node.children.forEach(subItem => {
                                                        if(item.value === subItem.value)                 {
                                                            flag = false
                                                        }
                                                    })
                                                    if(flag) {
                                                        // node.children.push(item);
                                                        list.push(item)
                                                    }
                                                })
                                            }
                                            // 通过调用resolve将子节点数据返回,通知组件数据加载完成
                                            resolve(list);
                                        }
                                        that.loading = false;
                                    });
                                }
                            }
                        },
                    },
                    {type: 'Radio', label: '关联活动:', prop: 'relevanceActivities', showType: 'show',datas: []},
                    {type: 'QueryBuilder', label: '更多条件:', prop: 'builderData', showType: 'show',datas: []},
                ],

  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值