preface

Recently, I need to use the plugin element UI to do four-level linkage of regions, but I encountered some problems:

  • The instructions on the official website are too general to follow
  • Online tutorials are a mess, and there are piles of code
  • Read this article right!!
  • Rendering = >

  • Click confirm value

1. template

   <el-cascader
      size="mini"
      :props="props"
      @change="handleChange"
      v-model="value"
      style="width: 300px"
    ></el-cascader>
    
Copy the code

// props => control dynamically loaded configuration

// @change => Listen for changes

/ / value = > value

2. methods()

// Get provinceFn(id) {let data = {up_id: id,}; Return postRequest(url.getLowerLevelArea, data); return postRequest(url.getLowerLevelArea, data); }, // Listen for data changes handleChange(value) {console.log(value); }Copy the code

3. The data () configuration

Data () {return {value: [], // This is an array of props: {lazy: true, lazyLoad: (node, resolve) => {// node data node.value => current node value // level: level => 1,2,3,4 const {level} = node; // Dynamic nodes const nodes = []; Let type = level == 0? "1" : node.value; this.provinceFn(type) .then((res) => { if (res.code == -1) { this.msgFn("error", res.message); return; } // array res.data.map((item) => {let obj = {value: item.city_id, label: item.city_name, leaf: node.level >= 3, }; nodes.push(obj); }); // The resolve node returns resolve(nodes); }) .catch((error) => { console.log(error); }); ,}}}; }Copy the code

FAQ

The comments are already very detailed, and the overall idea is as follows:

  1. LazyLoad (resolve, node)
  2. Configure your own interface request, mine is the region data (linkage between provinces and cities four levels)
  3. One thing to noteProps needs to be assigned in data(),So data requests go in as well
  4. After the data is obtained, it is required to assign the value => value: value, label: text, leaf: hierarchy according to its specification
  5. If it is level 3, then the value of Leaf is => 0, 1, 2, and so on. => node.level >= 3
  6. Try not to use hover (the effect will flash, user experience is not good, click best)

Packaged as a component, with all the code 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: level // node data // Level menu data // 1 indicates 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; } // array res.data.map((item) => {// {value:'',label:' all '} let obj = {value: item.city_id, label: item.city_name, leaf: node.level >= 3, }; nodes.push(obj); }); // The resolve node returns resolve(nodes); }) .catch((error) => { console.log(error); }); ,}}}; }, created() {}, methods: {// provinceFn(id) {let data = {up_id: id,}; return postRequest(url.getlowerlevelarea, data); }, handleChange(value) { console.log(value); MsgFn (type, text) {this.$message({message: text, type: type,}); ,}}}; </script> <style lang="scss" scoped> .con { display: inline-block; } </style>Copy the code

Conscience good article, speak very carefully, sincerely for the top ~, will continue to output high quality good article!