How to realize the Vue cascade drop-down box

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: