element el-cascader-panel级联面板配合动态加载造成的问题

使用element的el-cascader-panel级联面板,正常使用的话,第三级会存在多余请求或者请求加载效果(不知道是不是我写法有问题)。目前百度的全是级联选择器,找不到级联面板的的内容,记录一下。

<div class="addFormWrap">
                <div class="addLeft">
                    <h2>选择类目</h2>
                    <div class="addLeftItem">
                        <el-cascader-panel ref="cascaderPanel" :clearable="true" :props="props" @change="changeSelectArr">
                            <template slot-scope="{ node, data }">
                                <span>{{ data.label }}</span>
                            </template>
                        </el-cascader-panel>
                    </div>
                </div>
                <div class="addRight">
                    <h2>已选类目</h2>
                    <div style="height: 352px;border: 1px solid #ececec;">
                        <div class="addRightItem">
                            <div v-for="(item,index) in selectArrs" class="hasSelectWrap" :key="index">
                                <span>{{item.label}}</span><span @click="deleteSelectItem(index)" class="el-icon-error"></span>
                            </div>
                        </div>
                        <div style="position: relative;width:100%;height: 32px;">
                            <el-button class="clearButton" size="small" type="danger" @click="clearLMs()" plain>清空</el-button>
                        </div>
                    </div>
                </div>
            </div>
data() {
    let self = this;
    return {
        tableData: [], // 佣金类目列表
        selectArrs: [], // 选择的类目
        props: {
                multiple: true, 
                emitPath: false,
                lazy: true,
                async lazyLoad(node, resolve) {
                    const {level, data} = node;
                    let parentId = data ? data.value : 0;
                    if(level >= 3) { // 第三级 resolve(null)和return一起用 可以解决存在加载loading效果或者直接不return造成的多余请求
                         resolve(null);
                         return
                    }
                    let nodes = await self.getGClist(parentId);
                    let _nodes = nodes.map(item => ({
                        value: item.value,
                        label: item.label,
                        disabled: false,
                        leaf: level >= 2
                    }));
                    for(let i in _nodes) {
                        for(let k in self.tableData) { // 禁选已设置佣金的
                            if(_nodes[i].value == self.tableData[k].class_3){
                                self.$set(_nodes[i],'disabled', true);
                            }
                        }
                    }
                    resolve(_nodes);
                }
            },
    }
},
methods: {
    getGClist(parentId) { // 获取经营类目
          let url = `index.php?act=store&op=get_gc_list&parent=${parentId}`;
          return axios.get(url).then(res => {
              if(res.status == 200 && res.data.code == 200) {
                  const records = res.data.records;
                  return Promise.resolve(records);
              }
          })
      },
      changeSelectArr() { // 选择
        let node_arr = this.$refs.cascaderPanel.getCheckedNodes(); //获取选中的节点数据对象
        let select_arr = []; // 选中的
        // console.log(node_arr,'node_arr');
        for(let key in node_arr) {
            select_arr.push(node_arr[key]['data']);
        }
        let dataArray = [...this.selectArrs,...select_arr];
        let _filterArray = dataArray.filter(item => item.leaf == true); // 过滤上级的节点
        const strings = _filterArray.map((item) => JSON.stringify(item));
        const removeDupList = [...new Set(strings)]; //也可以使用Array.from(new Set(strings))
        const result = removeDupList.map((item) => JSON.parse(item));
        this.selectArrs = result;
      },
    
}

正常效果:

props里的判断条件 level >= 3 如果不同时使用,会造成下面两种问题存在

说下思路:文档里介绍懒加载lazyload方法有两个参数,第一个参数node为当前点击的节点,第二个resolve为数据加载完成的回调(必须调用),promise要想停止正常需要reject出去,但是这里没法使用,或者是我没用好。我尝试resolve(null)以及配合return后竟然奇迹解决了上面两种问题。如有大佬解释下更好,虽然我歪打正着了。

  • 3
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值