ElementUI implements cascading selector

ElementUI implements cascading selector

This article example shares the specific code of elementUI to implement the cascade selector for your reference. The specific content is as follows

1. Call the interface from the backend and pass data to the frontend

2. Use VUE code to display cascading options

<el-cascader
        :disabled="isDisabled"
        :props="defaultParams"
        :options="options"
        v-model="selectedOptions"
        :show-all-levels="false"
        filterable
        :clearable="true"
      ></el-cascader>

3. Define JS

data() {
   options: [],
      selectedOptions: [],
      defaultParams: {
        label: "name",
        value: "code",
        children: "children",
      },
},
created() {
 listArea(330000).then((response) => {
       console.log(response);
       this.options = this.getTreeData(response);
       this.loading = false;
     });
},
methods: {
 // Recursively eliminate empty arrays getTreeData(data) {
      // Loop through json data for (var i = 0; i < data.length; i++) {
        if (data[i].children.length < 1) {
          // If children is an empty array, set children to undefined
          data[i].children = undefined;
        } else {
          // If children is not an empty array, continue to recursively call this method this.getTreeData(data[i].children);
        }
      }
      return data;
    }
}

4. The display effect is as follows

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.

You may also be interested in:
  • Practice of el-cascader cascade selector in elementui
  • Solution to the cascade selector bug in Vue+ElementUI

<<:  How to use IDEA to create a web project and publish it to tomcat

>>:  Why the disk space is not released after deleting data in MySQL

Recommend

Detailed explanation of common commands in Docker repository

Log in docker login Complete the registration and...

Beginners learn some HTML tags (1)

Beginners can learn HTML by understanding some HT...

js to achieve star flash effects

This article example shares the specific code of ...

Detailed explanation of Vue data proxy

Table of contents 1. What I am going to talk abou...

Detailed explanation of two points to note in vue3: setup

Table of contents In vue2 In vue3 Notes on setup ...

JS implements the dragging and placeholder functions of elements

This blog post is about a difficulty encountered ...

JavaScript implements the pot-beating game of Gray Wolf

1. Project Documents 2. Use HTML and CSS for page...

Detailed explanation of MySQL batch SQL insert performance optimization

For some systems with large amounts of data, the ...

Echarts tutorial on how to implement tree charts

Treemaps are mainly used to visualize tree-like d...

Solution to the error when calling yum in docker container

When executing yum in dockerfile or in the contai...

Example of how to create a local user in mysql and grant database permissions

Preface When you install MySQL, you usually creat...

Specific usage of CSS compound selectors

Intersection Selector The intersection selector i...

Detailed explanation of DOM DIFF algorithm in react application

Table of contents Preface What is VirtualDOM? Rea...

Docker deployment and installation steps for Jenkins

First, we need a server with Docker installed. (I...