Network Security Internet Technology Development Database Servers Mobile Phone Android Software Apple Software Computer Software News IT Information

In addition to Weibo, there is also WeChat

Please pay attention

WeChat public account

Shulou

How to realize the Vue cascade drop-down box

2025-04-01 Update From: SLTechnology News&Howtos shulou NAV: SLTechnology News&Howtos > Development >

Share

Shulou(Shulou.com)06/01 Report--

Today, the editor will share with you the relevant knowledge points about how to achieve the Vue cascade drop-down box. The content is detailed and the logic is clear. I believe most people still know too much about this knowledge, so share this article for your reference. I hope you can get something after reading this article. Let's take a look.

1. Database design

All relevant data can be stored in a table so that the data is not subject to hierarchical restrictions.

For the table structure, please refer to the following table SQL:

CREATE TABLE `supplies_ type` (`id` int (11) NOT NULL AUTO_INCREMENT, `category_ type` varchar (64) NOT NULL COMMENT "Category Category: big Class, medium Class, small Class", `big_category_ name` varchar (64) NOT NULL COMMENT "Big Class name", `middle_category_ name` varchar (64) DEFAULT NULL COMMENT "medium Class name", `small_category_ name` varchar (64) DEFAULT NULL COMMENT "small Class name", `parent_ name` int (11) DEFAULT NULL, `create_ time` timestamp NULL DEFAULT CURRENT_TIMESTAMP `create_user_ name` varchar (64) DEFAULT NULL COMMENT "creator user name", `is_ time` timestamp NULL DEFAULT NULL ON UPDATE CURRENT_TIMESTAMP, `is_ deleted` tinyint (1) DEFAULT "0" COMMENT "whether to delete 1 indicates that ", PRIMARY KEY (`id`) ENGINE=InnoDB AUTO_INCREMENT=1 DEFAULT CHARSET=utf8mb4 has been deleted"

The screenshot of the database is shown in the following picture. Note: in order to reduce the number of queries, some fields are redundant, and readers can adjust them according to their own needs.

The core design lies in parent_id. Subclasses can be queried according to the parent_id field. The result is shown below:

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.

Views: 0

*The comments in the above article only represent the author's personal views and do not represent the views and positions of this website. If you have more insights, please feel free to contribute and share.

Share To

Development

Wechat

© 2024 shulou.com SLNews company. All rights reserved.

12
Report