本文主要是介绍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后竟然奇迹解决了上面两种问题。如有大佬解释下更好，虽然我歪打正着了。
这篇关于element el-cascader-panel级联面板配合动态加载造成的问题的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
