How to add an option to select all when Element ui pulls down multiple selections

This article mainly introduces how Element ui in the drop-down multi-election to add a choice of all options, has a certain reference value, interested friends can refer to, I hope you can learn a lot after reading this article, the following let Xiaobian take you to understand.

For example:

Document new Vue ({el: "# app", data: {cities: [{value: 'Beijing',label:' Beijing'}, {value: 'Shanghai',label:' Shanghai'}, {value: 'Nanjing',label:' Nanjing'} {value: 'Chengdu',label:' Chengdu'}, {value: 'Shenzhen',label:' Shenzhen'}, {value: 'Guangzhou',label:' Guangzhou'}], citys: []})

The rendering is as follows:

You can select multiple options at this time. If you want to select all the options, you have to click them one by one. This is not very convenient. We can add one to select all options in the drop-down box. You can use a few lines of code to mutually exclusive with other options through watch to achieve one-click multiple selections, as shown below:

Document new Vue ({el: "# app", data: {cities: [{value: 'Beijing',label:' Beijing'}, {value: 'Shanghai',label:' Shanghai'}, {value: 'Nanjing'') Label: 'Nanjing'}, {value: 'Chengdu',label:' Chengdu'}, {value: 'Shenzhen',label:' Shenzhen'}, {value: 'Guangzhou',label:' Guangzhou'}], citys: []}, watch: {citys:function (val Oldval) {if (val.indexOf ('all')! =-1 & & oldval.indexOf (' all') = =-1 & val.length > 1) {/ / if all selections are checked in the new selection, all selections are checked, then only the entire option this.citys= is checked in a straight line ['all'] } else if (index = val.indexOf ('all')! =-1 & & oldval.indexOf (' all')! =-1 & & val.length > 1) {/ / if all is checked before the operation and all is currently checked and the number is greater than 1, all this.citys.splice is removed (val.indexOf ('all'), 1)}})

In this way, we can repel each other. When we choose Beijing and Shanghai, the selector is as follows:

Click to select all as follows:

Then click on other options, select all and uncheck, for example, select Shenzhen:

This enables the mutual exclusion of all selections and other options, while other options can be selected more than one.

Thank you for reading this article carefully. I hope the article "how to add an option to choose all in Element ui" shared by the editor is helpful to everyone. At the same time, I also hope that you can support us and follow the industry information channel. More related knowledge is waiting for you to learn!