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:
|
<<: 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
Introduction Memcached is a distributed caching s...
Table of contents 1. Basic Introduction to JavaSc...
Table of contents 1. What is an event? 2. How to ...
1. Delete file command: find the corresponding di...
A web designer's head must be filled with a lo...
The online search to modify the grub startup time...
Table of contents Preparation Install VMware Work...
1. Introduction: If we want to display flash conte...
Whether it is a corporate website, a personal blo...
Linux: Linux version 3.10.0-123.9.3.el7.x86_64 Ng...
Overview binlog2sql is an open source MySQL Binlo...
Use vite to build a vue3 project You can quickly ...
This article shares the specific code of JavaScri...
After clicking the a tag in the page, you want to ...
Set Anchor Point <a name="top"><...