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 Mencached cache configuration based on Nginx

Introduction Memcached is a distributed caching s...

Detailed explanation of javascript knowledge points

Table of contents 1. Basic Introduction to JavaSc...

Linux automatically deletes logs and example commands from n days ago

1. Delete file command: find the corresponding di...

9 super practical CSS tips to help designers and developers

A web designer's head must be filled with a lo...

Modify the boot time of grub in ubuntu

The online search to modify the grub startup time...

10 Tips to Improve Website Usability

Whether it is a corporate website, a personal blo...

Nginx server https configuration method example

Linux: Linux version 3.10.0-123.9.3.el7.x86_64 Ng...

Steps to build the vite+vue3+element-plus project

Use vite to build a vue3 project You can quickly ...

JavaScript implements draggable progress bar

This article shares the specific code of JavaScri...

Use href to simply click on a link to jump to a specified place on the page

After clicking the a tag in the page, you want to ...

Application of anchor points in HTML

Set Anchor Point <a name="top"><...