vue+element 如何在Cascader级联选择器懒加载lazyload中实现服务端请求数据 Vue+Element

在使用Element UI的Cascader级联选择中，有时候需要动态加载，在文档中，也提供了相关的示例代码：
这只是示例代码，lazyload中往往是通过请求服务端来获取数据，不多说，直接贴代码

文章图片

Element UI：

1 7

Vue：

1 > 2export default { 3name: 'basetable', 4data() { 5let that = this; 6return { 7loading: false, 8input_select_loading: false, 9areas: this.$regionData, 10codes: { 11value: 'code', 12label: 'name', 13lazy: true, 14lazyLoad(node, resolve) { 15const { level } = node; // 获取当前node对象中的level属性 16that.$http 17.post(that.Api.getOccupationCode, { 18level: level, 19code: node.value 20}) 21.then(res => { 22if (res.code == 1) { 23const nodes = res.data; 24if (level > 1) { 25nodes.forEach(item => { 26item.leaf = level >= 2; //判断是否为末尾节点，这个地方是0,1,2三级 27item.disabled = item.type == '拒保'; // 判断是否可选 28}) 29} 30resolve(nodes); 31} else { 32that.$message.error(res.msg); 33} 34}) 35} 36},

服务端：
that.$http.post(that.Api.getOccupationCode, {level: level,code: node.value}).then()，是自己获取服务端数据的方法，返回数据格式就是二维数组
备注：
1、在调用时，注意this的指向问题；
【vue+element 如何在Cascader级联选择器懒加载lazyload中实现服务端请求数据】2、注意每个节点node的leaf，一般第一层节点的leaf可以不做处理，在最后一层的数据中要判断是否为末尾节点，否则会一直生成
更多博文：落日长烟的博客