element el-cascader动态加载数据 （多级联动，落地方案）

1. template

<el-cascader

size=“mini”

:props=“props”

@change=“handleChange”

v-model=“value”

style=“width: 300px”

//  props => 控制动态加载的配置

// @change => 监听变化

// value => 值

2. methods()

// 获取省市区街道

provinceFn(id) {

let data = {

up_id: id,

};

// 此处是一个promise 直接返回

return postRequest(url.getlowerlevelarea, data);

},

// 监听数据变化

handleChange(value) {

console.log(value);

}

3. data()配置

data() {

return {

value: [], // 多级联动的值 => 会是一个数组

props: {

lazy: true,

lazyLoad: (node, resolve) => {

// node 节点数据 node.value => 当前节点的值

// level: 层级 => 1,2,3,4

const { level } = node;

// 动态节点

const nodes = [];

// 为1代表第一次请求

let type = level == 0 ? “1” : node.value;

this.provinceFn(type)

.then((res) => {

if (res.code == -1) {

this.msgFn(“error”, res.message);

return;

}

// 节点数组

res.data.map((item) => {

// obj里的键值是官方要求的

let obj = {

value: item.city_id,

label: item.city_name,

leaf: node.level >= 3,

};

nodes.push(obj);

});

// resolve 节点返回

resolve(nodes);

})

.catch((error) => {

console.log(error);

});

},

},

};

}

FAQ

注释其实已经非常详细了，整体思路是这样的：

1. 根据官方文档，首先得知道 lazyLoad方法中的参数node, resolve分别是什么

2. 配置自己的接口请求，我的是地区数据（省市区四级联动）

3. 需要注意的是 props需要在data()里赋值，所以数据请求也要放进去

4. 获取到数据后，需要按照它的规范赋值 => value：值，label：文字，leaf：层级

5. 如果是三级，那么leaf值是=> 0, 1, 2，以此类推。我的是四级，所以是 => node.level >= 3

6. 尽量不要用hover（效果会一闪一闪的，用户体验不好，click最佳）

已封装成组件，附上全部代码，供君使用：

<el-cascader

size=“mini”

:props=“props”

@change=“handleChange”

v-model=“value”

style=“width: 300px”