前言
最近需要用到element ui的这个插件做地区的四级联动，但是碰了一些问题：
- 官网的说明太泛泛然，不易看懂
- 网上的教程乱七八糟，代码一堆一堆的
- 看这篇就对了！！！
- 效果图 =>
- 点击确认后的值
1. template
<el-cascader size="mini" :props="props" @change="handleChange" v-model="value" style="width: 300px" ></el-cascader>
// 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
注释其实已经非常详细了，整体思路是这样的：
根据官方文档，首先得知道 lazyLoad方法中的参数node, resolve分别是什么
配置自己的接口请求，我的是地区数据（省市区四级联动）
需要注意的是 props需要在data()里赋值，所以数据请求也要放进去
获取到数据后，需要按照它的规范赋值 => value：值，label：文字，leaf：层级
如果是三级，那么leaf值是=> 0, 1, 2，以此类推。我的是四级，所以是 => node.level >= 3
尽量不要用hover（效果会一闪一闪的，用户体验不好，click最佳）
