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

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

选择类目

已选类目

{{item.label}}
清空
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;
      },
    
}

正常效果:

element el-cascader-panel级联面板配合动态加载造成的问题_第1张图片

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

element el-cascader-panel级联面板配合动态加载造成的问题_第2张图片

element el-cascader-panel级联面板配合动态加载造成的问题_第3张图片

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

你可能感兴趣的:(vue学习,心得历程,js补基础,elementui)