Cascade Selector Based on vue2.0 and vue2.0

Cascade Selector Based on vue2.0 and vue2.0

The cascade Selector Based on Vue. It can be single, Second, third-level Cascade, and multi-level Cascade.

In web development, we often encounter cascade selector problems, especially in forms:

1. Single cascade (drop-down selection box, single choice)
2. Single cascade (Multiple choices)
3. Level-2 linkage (province-city linkage)
4. Three-Level linkage (provincial/municipal linkage)

There are many useful plug-ins in jquery, such as select2, single choice, and multiple choice functions.

This article discusses the implementation of cascade selector in vue. I have encountered backend data in the following two situations in the project. After reading the information, I also confirmed the rationality of the two data types:

Preview address

Github address

1. backend data processing logic

In this case, it is recommended that a large amount of data operations be performed on the backend. You only need to discuss the data format at the front and back ends.

The general data format may be as follows:

[{Value: 'beijing', label: 'beijing', children: [{value: 'chunyang', label: 'chaoyang'}, {value: 'haidian', label: 'haidian '}, {value: 'changping', label: 'changping'}, {value: 'shunyi', label: 'shunyi '}]}, {value: 'shanghai', label: 'shanghai', children: [{value: 'shanghai', label: 'baoshan '}, {value: 'jiading', label: 'jiading '}, {value: 'hangzhou', label: 'songjiang'}, {value: 'png', label: 'pudong '}]

Features: hierarchical nesting between data, clear relationship between upper and lower levels

2. frontend data processing logic

This situation is suitable for data with a small amount of data, or for some reason, the backend can only return this type of data to you, then all data processing needs to be performed by the front end, the final format is similar to the above, but it is a problem of several or fewer fields.

The data format may be as follows:

[{Code: 420000, name: 'hubei province ', parentCode: 0}, {code: 420100, name: 'wuhan City', parentCode: 420000}, {code: 420101, name: 'municipal authorization', parentCode: 420100}, {code: 420102, name: 'jiang 'an region', parentCode: 420100}, {code: 420103, name: 'jianghan region', parentCode: 420100 },{ code: 420104, name: 'hangzhou', parentCode: 420100 },{ code: 420105, name: 'hangyang', parentCode: 420100 },{ code: 421000, name: 'jingzhou City ', parentCode: 420000}, {code: 421001, name: 'municipal authorization', parentCode: 421000}, {code: 421002, name: 'shachangzhou', parentCode: 421000 },{ code: 421003, name: 'jingzhou district ', parentCode: 421000 },{ code: 430000, name: 'hunan province', parentCode: 0 },{ code: 430100, name: 'changsha City ', parentCode: 430000}, {code: 430101, name: 'municipal authority', parentCode: 430100}, {code: 430102, name: 'furong district ', parentCode: 430100 },{ code: 430103, name: 'tianxin region', parentCode: 430100 },{ code: 430104, name: 'yuelu region', parentCode: 430100}]

Feature: the data format is a flat table. Each piece of data has a superior-subordinate relationship with it. When we view the upper and lower layers of a data, we need to traverse the data again.

How to use it in components

<Div class = "hello"> <form-organization: organization = "organization" v-model = "seleted"> </form-organization> </div> <script> import FormOrganization from '@/components/FormOrganization' export default {name: 'Hello', data () {return {seleted: [], organization: [{value: 'beijing', label: 'beijing'}, {value: 'shanghai ', label: 'shanghai'}, {value: 'shenzhen', label: 'shenzhen'}, {value: 'hangzhou', label: 'hangzhou'}, {value: 'zhengzhou ', label: 'zhengzhou'}, {value: 'guangzhou ', label: 'guangzhou'}, {value: 'xiamen', label: 'xiamen '}] }}, components: {FormOrganization }}</script>

API

Props	Type	Description
Origanization	Array	Cascade data sources. The format must be displayed in the first data format.
Value	Array	Selected or the default value. You can directly use the v-model syntax sugar. For more information, see the example.

The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.