vue el-select 全选多选

Posted 2021-10-09 小蘑菇

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了vue el-select 全选多选相关的知识，希望对你有一定的参考价值。

两种方式：
方式一：el-select可多选可单选，选择全部后不能选择其他，具体参照如下代码：

<el-select size="middle" clearable v-model="form.ground"  @change="handlePlat" placeholder="请选择小组" filterable multiple  style="width: 400px;">
  <el-option label="全部" value="全部"></el-option>
  <el-option v-for="(item, index) in groundList" :key="index" :label="item.name" :value="String(item.id)" :disabled="item.disabled"></el-option>
</el-select>

handlePlat(){
  if (this.form.ground.indexOf("全部") == "-1") {
    this.groundList.map((res) => {
      res.disabled = false;
    });
  } else {
    this.groundList.map((res) => {
      res.disabled = true;
    });
    this.form.ground = ["全部"];
  }
}

方式二：如果想要选择所有选项时，得一个个去点击，这样不是很方便，我们可以在下拉框里新增一个选择所有的选项，通过watch用几行代码就可以实现与其它选项的互斥来实现一键多选，如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/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: \'南京\'}, 
                    {value: \'Chengdu\',label: \'成都\'}, 
                    {value: \'Shenzhen\',label: \'深圳\'}, 
                    {value: \'Guangzhou\',label: \'广州\'}
                ],
                citys:[]
            },
            watch:{
                citys:function(val,oldval){
                    //获取val和oldval里all的索引,如果没有则返回-1
                    let newindex = val.indexOf(\'all\'),oldindex = oldval.indexOf(\'all\'); 
                    if(newindex!=-1 && oldindex==-1 && val.length>1) //如果新的选择里有勾选了选择所有选择所有 则 只直线勾选所有整个选项
                        this.citys=[\'all\']; else if(newindex!=-1 && oldindex!=-1 && val.length>1) //如果操作前有勾选了选择所有且当前也选中了勾选所有且勾选数量大于1  则移除掉勾选所有
                        this.citys.splice(val.indexOf(\'all\'),1)                    
                }
            }
        }) 
     </script>
</body>
</html>

以上是关于vue el-select 全选多选的主要内容，如果未能解决你的问题，请参考以下文章

Vue踩坑之 el-select下拉框多选，选择后赋值成功，输入框不显示选中的值

vue+elementui中，el-select多选下拉列表中，如何同时获取:value和:label的值？

关于el-select 单选与多选切换的时候报错的解决办法

vue checkbox多选框按钮添加全选按钮

vue el-select 全选 多选

vue el-select 全选多选