A new option to select all the lower Colorado selected Element ui

Often used in the project, a new option to select all in a multi-selection drop-down box, for example:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>
<body>
    <div id="app">
        <el-form>
            <el-form-item>
                <el-select  placeholder="请选择活动区域" multiple v-model="citys">
                      <el-option v-for="item in cities" :label="item.label" :value="item.value" :key="item.value"></el-option>
                </el-select>
              </el-form-item>
          </el-form>
    </div>
    <script>
        new Vue({
            el:"#app",
            data:{
                cities: [
                    {value: 'Beijing',label: '北京'}, 
                    {value: 'Shanghai',label: '上海'}, 
                    {value: 'Nanjing',label: '南京'}, 
                    {value: ' Chengdu ' , label: ' Chengdu ' }, 
                    {value: ' on Shenzhen ' , label: ' Shenzhen ' }, 
                    {value: ' of Guangzhou ' , label: ' Canton ' } 
                ], 
                the citys: [] 
            } 
        }) 
    </ Script > 
</ body > 
</ HTML >

Render as follows:

At this point can be selected, if you want to select all the options have to click one by one, so not very convenient, we can add a select all the options in the drop-down box, the watch with a few lines of code can be achieved with other mutually exclusive options to achieve a key multiple choice, as follows:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>
<body>
    <div id="app">
        <el-form>
            <el-form-item>
                <el-select  placeholder="请选择活动区域" multiple v-model="citys">
                    <el-option label="选择所有" value="all"></el-option>
                      <el-option v-for="item in cities" :label="item.label" :value="item.value" :key="item.value"></el-option>
                </el-select>
              </el-form-item>
          </el-form>
    </div>
    <script>
        new Vue({
            el:"#app",
            data:{
                cities: [
                    {value: 'Beijing',label: '北京'}, 
                    {value: 'Shanghai',label: '上海'}, 
                    {value: ' Nanjing ' , label: ' Nanjing ' }, 
                    {value: ' Chengdu ' , label: ' Chengdu ' }, 
                    {value: ' on Shenzhen ' , label: ' Shenzhen ' }, 
                    {value: ' of Guangzhou ' , label: ' Guangzhou ' } 
                ], 
                the citys: [] 
            }, 
            Watch: { 
                the citys: function(Val, OLDVAL) {
                     IF (val.indexOf ( ' All ' ) = -! . 1  && oldval.indexOf ( ' All ' ) == - . 1  && val.length > . 1 ) {                       // If there are new options hook select All select all chose only linearly check all options throughout 
                        the this .citys = [ ' All ' ]; 
                    } the else  IF (index = val.indexOf ( ' All ' ) ! = - . 1  && oldval.indexOf (' All ' ) = -! . 1  && val.length > . 1 ) {         // before checking if the operator has selected all of the current and also check all selected number is greater than one and remove the checked check out all 
                        the this . citys.splice (val.indexOf ( ' All ' ), . 1 ) 
                    } 
                } 
            } 
        }) 
    </ Script > 
</ body > 
</ HTML >

This can be mutually exclusive, and when we choose to Beijing and Shanghai, selectors as follows:

Click to select all the time, as follows:

Then click on the other options, it will select all the uncheck, such as selecting Shenzhen:

All this to achieve a mutually exclusive choice and other options, and other options and can be multiple choice.

A new option to select all the lower Colorado selected Element ui

Guess you like