preface
It needs to be used recently element ui This plug-in does the four level linkage of the region , But there are some problems ：
* The explanation on the official website is too general , It's not easy to understand
* The online tutorial is a mess , The code is piling up
* Just read this one !!!
* design sketch =>
* Click the value after confirmation
1. template
<el-cascader size="mini" :props="props" @change="handleChange"
v-model="value" style="width: 300px" ></el-cascader>
// props => Control the configuration of dynamic loading
// @change => Monitor changes
// value => value
2. methods()
// Access to provincial streets provinceFn(id) { let data = { up_id: id, }; // Here is an example promise Direct return
return postRequest(url.getlowerlevelarea, data); }, // Monitor data changes
handleChange(value) { console.log(value); }
3. data() to configure
data() { return { value: [], // Value of multi-level linkage => It's going to be an array props: { lazy: true,
lazyLoad: (node, resolve) => { // node Node data node.value => The value of the current node // level: Hierarchy
=> 1,2,3,4 const { level } = node; // Dynamic node const nodes = []; // by 1 On behalf of the first request let
type = level == 0 ? "1" : node.value; this.provinceFn(type) .then((res) => { if
(res.code == -1) { this.msgFn("error", res.message); return; } // Node array
res.data.map((item) => { // obj The key values in are officially required let obj = { value: item.city_id,
label: item.city_name, leaf: node.level >= 3, }; nodes.push(obj); }); //
resolve Node return resolve(nodes); }) .catch((error) => { console.log(error); }); },
}, }; }
FAQ
The notes are actually very detailed , The whole idea is this ：
* According to official documents , The first thing to know lazyLoad Parameters in methods node, resolve What are the differences
* Configure your own interface request , I'm looking at regional data （ Four level linkage of province and city ）
* It should be noted that props Need to be in data() Value in , So the data request should also be put in
* After getting the data , It needs to be assigned according to its specification => value： value ,label： written words ,leaf： Hierarchy
* If it's level three , that leaf The value is => 0, 1, 2, and so on . My grade is four , So it is => node.level >= 3
* Try not to use it hover（ The effect will flash , Poor user experience ,click optimum ）
Packaged as a component , Attach all codes , For your use ：
<template> <div class="con"> <el-cascader size="mini" :props="props"
@change="handleChange" v-model="value" style="width: 300px" ></el-cascader>
</div> </template> <script> import url from "../request/url.js"; import {
postRequest } from "../request/api.js"; export default { name: "newRegion",
data() { return { value: [], props: { lazy: true, lazyLoad: (node, resolve) =>
{ const { level } = node; const nodes = []; // level: Hierarchy // node Node data // First level menu data
// by 1 On behalf of the first request let type = level == 0 ? "1" : node.value; this.provinceFn(type)
.then((res) => { if (res.code == -1) { this.msgFn("error", res.message);
return; } // Node array res.data.map((item) => { // {value:'',label:' whole '} let obj = {
value: item.city_id, label: item.city_name, leaf: node.level >= 3, };
nodes.push(obj); }); // resolve Node return resolve(nodes); }) .catch((error) => {
console.log(error); }); }, }, }; }, created() {}, methods: { // Access to provincial and urban areas
provinceFn(id) { let data = { up_id: id, }; return
postRequest(url.getlowerlevelarea, data); }, handleChange(value) {
console.log(value); }, // Popup msgFn(type, text) { this.$message({ message: text,
type: type, }); }, }, }; </script> <style lang="scss" scoped> .con { display:
inline-block; } </style>
Good conscience , It was very detailed , Sincerely seek the top ~, In the future, we will continue to output high quality articles !
Technology