使用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后竟然奇迹解决了上面两种问题。如有大佬解释下更好，虽然我歪打正着了。