Shulou(Shulou.com)05/31 Report--

The knowledge of this article "how to use vue2.0 to achieve cascade selector" is not understood by most people, so the editor summarizes the following contents, detailed contents, clear steps, and has a certain reference value. I hope you can get something after reading this article. Let's take a look at this "how to use vue2.0 to achieve cascade selector" article.

1 back-end processing data logic

This situation is recommended. A large number of data operations are carried out at the back end, as long as the front and back ends discuss the data format.

General data formats may be as follows:

[{value: 'beijing', label:' Beijing', children: [{value: 'chaoyang', label:' Chaoyang'}, {value: 'haidian', label:' Haidian'}, {value: 'changping', label:' Changping'}, {value: 'shunyi', label:' Shunyi'}]}, {value: 'shanghai', label:' Shanghai' Children: [{value: 'baoshan', label:' Baoshan'}, {value: 'jiading', label:' Jiading'}, {value: 'songjiang', label:' Songjiang'}, {value: 'pudong', label:' Pudong'}]}]

Features: hierarchical nesting of data, the relationship between superiors and subordinates is very clear

2 front-end processing data logic

This situation is suitable for data with a small amount of data, or for some reason, the backend can only return this kind of data to you, then all data processing needs to be operated by the front end, and the final format is similar to the situation mentioned above. it's just a matter of a few more or fewer fields.

The data format might look like this:

[{code: 420000, name: 'Hubei', parentCode: 0}, {code: 420100, name: 'Wuhan', parentCode: 420000}, {code: 420101, name: 'municipal district', parentCode: 420100}, {code: 420102, name: 'Jiangan District', parentCode: 420100}, {code: 420103, name: 'Jianghan District', parentCode: 420100}, {code: 420104, name: 'Dengkou District', parentCode: 420100}, {code: 420105, name: 'Hanyang District' ParentCode: 420100}, {code: 421000, name: 'Jingzhou', parentCode: 420000}, {code: 421001, name: 'municipal district', parentCode: 421000}, {code: 421002, name: 'Shashi District', parentCode: 421000}, {code: 421003, name: 'Jingzhou District', parentCode: 421000}, {code: 430000, name: 'Hunan Province', parentCode: 0}, {code: 430100, name: 'Changsha', parentCode: 430000}, {code: 430101} Name: 'municipal district', parentCode: 430100}, {code: 430102, name: 'Furong District', parentCode: 430100}, {code: 430103, name: 'Tianxin District', parentCode: 430100}, {code: 430104, name: 'Yuelu District', parentCode: 430100}]

Features: the data format is a plane table, and each piece of data has a corresponding superior-subordinate relationship. When we look at the superiors and subordinates of a data, we all need to traverse the data again.

How to use in components

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}}

API

PropstypedescriptionoriganizationArray cascading data sources, the format must be in accordance with the format of the first data to show valueArray selected or default value, you can directly use v-model syntax sugar, you can check the example above is about "how to use vue2.0 to achieve cascading selector" this article content, I believe we all have a certain understanding, I hope the editor to share the content to help you, if you want to know more related knowledge content Please follow the industry information channel.

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.