el-select 下拉框全选、多选的几种方式组件

news2024/12/23 22:33:08

组件一、基础多选

适用性较广的基础多选,用 Tag 展示已选项

<template>
  <el-select v-model="value1" multiple placeholder="请选择">
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value">
    </el-option>
  </el-select>
</template>

<script>
  export default {
    data() {
      return {
        options: [{
          value: '选项1',
          label: '黄金糕'
        }, {
          value: '选项2',
          label: '双皮奶'
        }, {
          value: '选项3',
          label: '蚵仔煎'
        }, {
          value: '选项4',
          label: '龙须面'
        }, {
          value: '选项5',
          label: '北京烤鸭'
        }],
        value1: []
      }
    }
  }
</script>

el-select设置multiple属性即可启用多选,此时v-model的值为当前选中值所组成的数组。默认情况下选中值会以 Tag 的形式展现,你也可以设置collapse-tags属性将它们合并为一段文字。

<template>
  <el-select
    v-model="value2"
    multiple
    collapse-tags
    style="margin-left: 20px;"
    placeholder="请选择">
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value">
    </el-option>
  </el-select>
</template>

<script>
  export default {
    data() {
      return {
        options: [{
          value: '选项1',
          label: '黄金糕'
        }, {
          value: '选项2',
          label: '双皮奶'
        }, {
          value: '选项3',
          label: '蚵仔煎'
        }, {
          value: '选项4',
          label: '龙须面'
        }, {
          value: '选项5',
          label: '北京烤鸭'
        }],
        value2: []
      }
    }
  }
</script>

 组件二、el-select 下拉框多选实现全选

下拉项增加一个【全选】,然后应该有以下几种情况:

  1. 下拉选项全都勾选时,【全选】自动勾选;
  2. 下拉选项部分勾选时,点击【全选】后,所有下拉项全部勾选;
  3. 下拉选项全都未勾选时,点击【全选】后,所有下拉选项不勾选;
  4. 下拉选项和【全选】都选上的时候,不勾选任意下拉选项,【全选】按钮就不勾选了

效果图一、

上代码:

<template>
    <el-select multiple collapse-tags v-model='selectedArray' @change='changeSelect' @remove-tag='removeTag' placeholder='请选择'>
        <el-option label='全选' value='全选' @click.native='selectAll'></el-option>
        <el-option v-for='(item, index) in options' :key='index' :label='item.name' :value='item.name'></el-option>
     </el-select>
</template>

export default {
  data() {
    return {
      selectedArray: [],
      options: [
        { name: '一一', label: 'one' },
        { name: '二二', label: 'tow' },
        { name: '三三', label: 'three' },
        { name: '四四', label: 'four' },
        { name: '五五', label: 'five' }
      ]
    }
  },
  methods: {
    selectAll() {
      if (this.selectedArray.length < this.options.length) {
        this.selectedArray = []
        this.options.map((item) => {
          this.selectedArray.push(item.name)
        })
        this.selectedArray.unshift('全选')
      } else {
        this.selectedArray = []
      }
    },
    changeSelect(val) {
      if (!val.includes('全选') && val.length === this.options.length) {
        this.selectedArray.unshift('全选')
      } else if (val.includes('全选') && (val.length - 1) < this.options.length) {
        this.selectedArray = this.selectedArray.filter((item) => {
          return item !== '全选'
        })
      }
    },
    removeTag(val) {
      if (val === '全选') {
        this.selectedArray = []
      }
    }
  }
}

效果图二、

代码:
直接添加一个【全选】复选框,实现的功能跟方法一是一样的
 

<template>
  <el-select multiple collapse-tags v-model='selectedArray' @change='changeSelect' placeholder='请选择'>
    <el-checkbox v-model="checked" @change='selectAll'>全选</el-checkbox>
    <el-option v-for='(item, index) in options' :key='index' :label='item.name' :value='item.name'></el-option>
  </el-select>
</template>

export default {
  data() {
    return {
      checked: false,
      selectedArray: [],
      options: [
        { name: '一一', label: 'one' },
        { name: '二二', label: 'tow' },
        { name: '三三', label: 'three' },
        { name: '四四', label: 'four' },
        { name: '五五', label: 'five' }
      ]
    }
  },
  methods: {
    selectAll() {
      this.selectedArray = []
      if (this.checked) {
        this.options.map((item) => {
          this.selectedArray.push(item.name)
        })
      } else {
        this.selectedArray = []
      }
    },
    changeSelect(val) {
      if (val.length === this.options.length) {
        this.checked = true
      } else {
        this.checked = false
      }
    }
  }
}
.el-checkbox {
    text-align: right;
    width: 100%;
    padding-right: 10px;
 }

效果图三、

下拉框和全选都加上 checkbox,选择框 el-select 全选 多选, el-option与el-checkbox的组合使用

需要注意的事项:

1. el-select与el-checkbox-group的v-model 绑定的值,需相同,绑定同一个变量
2. el-option的value与el-checkbox的label绑定的值也需要相同
3. el-checkbox 需要使用 style=“pointer-events: none”, 是为了去掉鼠标事件,阻止事件冒泡,触发了两次el-select的change事件


代码如下:

 <el-select
                v-model="lineNumStage"
                v-bind="$attrs"
                multiple
                style="width: 100%;"
                placeholder="请选择线路"
                @change="handleSelect"
              >
                <div style="padding: 0 20px; line-height:34px">
                  <el-checkbox v-model="isCheckAll" :indeterminate="isIndeterminate" @change="handleCheckAllChange">全选</el-checkbox>
                </div>
                <el-checkbox-group v-model="lineNumStage">
                  <el-option v-for="item in checkedLineArry" :key="item.value" :label="item.name" :value="item.value">
                    <el-checkbox style="pointer-events: none" :label="item.value">
                      {{ item.label }}
                    </el-checkbox>
                  </el-option>
                </el-checkbox-group>
              </el-select>
checkAll: false, // 是否全选
isIndeterminate: false, //全选复选框标识        
options: [
    { name: '京广高速', value: '京广高速' },
    { name: '京包客专', value: '京包客专' },
    { name: '京哈高速', value: '京哈高速' },
    { name: '崇礼线',   value: '崇礼线' },
    { name: '京秦高铁', value: '京秦高铁' },
    { name: '京沪高铁', value: '京沪高铁' },
    { name: '京津城际', value: '京津城际' },
],
biddingStage: [],


// 下拉框选择事件
handleSelect(value) {
    const checkedCount = value.length;
    this.checkAll = checkedCount === this.options.length;
    this.isIndeterminate = checkedCount > 0 && checkedCount < this.options.length;
},
// 全选事件
handleCheckAllChange(val) {
    const data = this.options.map(item => {
        return item.value
    })
    this.biddingStage = val ? data : [];
    this.isIndeterminate = false;
},

注:  如果需要把右边的√去掉,el-select加上class和popper-append-to-body=false属性,然后css修改 

 /deep/ .el-select-dropdown.is-multiple .el-select-dropdown__item.selected::after {
   	display: none;
}

效果图四、 全选全部选中的时候,下拉框的文字是全选,后面是 + 12 数量

思路: 
由于添加了:collapse-tags 属性后,全选选中的时候,正常会默认选中第一个label的值显示,后面是 + 全部数量 -1 .  我们可以在初始化的时候,把默认选中的数组里面最前面添加一项“全选”

// 初始化给下拉框选中 的数组赋值

this.biddingStage = [ '京广高速','京包客专', '京哈高速','崇礼线','京沪高铁','京津城际']

this.biddingStage.unshift('全选')

然后在全选的方法里面:判断如果是全选就在最前面 添加1项 value 值 ‘全选’

// 全选事件
handleCheckAllChange(val) {
    const data = this.options.map(item => {
        return item.value
    })
    // this.biddingStage = val ? data : [];
     if (val) {
        this.biddingStage = data
        this.biddingStage .unshift('全选')
      } else {
        this.biddingStage  = []
      }
    this.isIndeterminate = false;
},

然后在 下拉框选项改变的时候: 

1. 先用arr1的变量存一下,把下拉框的数组 过滤出不含 全选的,剩余全部数据

2. 用selectArr的变量存一下, value的数组 过滤出不含 全选的,剩余全部数据

然后用新的2个变量去 执行

      const checkedCount = selectArr.length
      this.isCheckAll = checkedCount === arr1.length
      this.isIndeterminate = checkedCount > 0 && checkedCount < arr1.length

最后在判断  this.isCheckAll  是否是 true  是的话,就是全选。 在数组最前面添加 1项 value  ’全选‘
否则就移除 ’全选‘
 

      if (this.isCheckAll) {
        console.log('quanxuan')
        this.biddingStage.unshift('全选')
      } else {
        this.biddingStage = this.biddingStage.filter((item) => {
          return item !== '全选'
        })
        console.log(this.biddingStage)
      }

这部分全部代码如下:

    // 线路下拉框选择事件
    handleSelect(value) {
      console.log('value:', value)
      const arr1 = this.options.filter((item) => {
        return item !== '全选'
      })
      const selectArr = value.filter((item) => {
        return item !== '全选'
      })
      const checkedCount = selectArr.length
      this.isCheckAll = checkedCount === arr1.length
      this.isIndeterminate = checkedCount > 0 && checkedCount < arr1.length
      if (this.isCheckAll) {
        console.log('quanxuan')
        this.biddingStage.unshift('全选')
      } else {
        this.biddingStage= this.biddingStage.filter((item) => {
          return item !== '全选'
        })
        console.log(this.biddingStage)
      }
    },

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1031356.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

linux下特定usb设备的权限设置

文章目录 背景查找资料解决方案 背景 目前我在Ubuntu下使用一个USB热成像摄像头&#xff0c;通过调用它的sdk进行图像的采集以及获取对应像素点的温度。假设我现在的测试程序名称为MyApp。 当我用下面的命令运行时&#xff0c;程序是正常运行且能从热成像仪采集图像 sudo ./M…

上新!100%国产物料认证,米尔入门级国产核心板全志T113-i方案

自米尔国产全志T113系列的核心板发布以来&#xff0c;这款高性价比、低成本、入门级、高性能的国产核心板咨询不断&#xff0c;配套的开发板已经成交量数百套&#xff0c;深受工程师们的青睐&#xff0c;为了集齐T113全系列的产品&#xff0c;这次米尔发布了基于全志T113-i处理…

Spring学习笔记2 Spring的入门程序

Spring学习笔记1 启示录_biubiubiu0706的博客-CSDN博客 Spring官网地址:https://spring.io 进入github往下拉 用maven引入spring-context依赖 写spring的第一个程序 引入下面依赖,好比引入Spring的基本依赖 <dependency><groupId>org.springframework</groupId&…

DA5 网站用户没有补全的信息

目录 1.题目描述 2.输入描述 3.输出描述 4.题目分析 5.通过代码 1.题目描述 现有一个Nowcoder.csv文件&#xff0c;它记录了牛客网的部分用户数据&#xff0c;包含如下字段&#xff08;字段与字段之间以逗号间隔&#xff09;&#xff1a; Nowcoder_ID&#xff1a;用户ID …

应用在苹果应用商店该如何进行优化

众所周知&#xff0c;ASO最大化的提高应用程序在商店中的可见性&#xff0c;其目标是获得更多的下载量&#xff0c;同时它也与下载的转化率有关。 1、根据应用阶段追求不同的目标。 它可以是有机增长或转化率的提高&#xff0c;获得更多安装并降低用户获取成本&#xff0c;增加…

【Node.js】定时任务cron:

文章目录 一、文档&#xff1a;【Nodejs 插件】 二、安装与使用【1】安装【2】使用 三、cron表达式&#xff1a;{秒数} {分钟} {小时} {日期} {月份} {星期} {年份(可为空)}四、案例&#xff1a; 一、文档&#xff1a; 【说明文档】https://www.npmjs.com/package/cron 【Cron表…

Python 打印所有水仙花数

"""打印三位水仙花数介绍&#xff1a;水仙花数是指一个 n 位数&#xff0c;它的每个位上的数字的 n 次幂之和等于它本身。例如&#xff0c;153 是一个三位的水仙花数&#xff0c;因为 (1**3) (5**3) (3**3) 153。下面是一个 Python 程序&#xff0c;用于生成…

【大数据开发技术】实验04-HDFS文件创建与写入

文章目录 一、实验目标二、实验要求三、实验内容四、实验步骤 一、实验目标 熟练掌握hadoop操作指令及HDFS命令行接口掌握HDFS原理熟练掌握HDFS的API使用方法掌握单个本地文件写入到HDFS文件的方法掌握多个本地文件批量写入到HDFS文件的方法 二、实验要求 给出主要实验步骤成…

【用unity实现100个游戏之12】unity制作一个俯视角2DRPG《类星露谷物语》资源收集游戏demo

文章目录 前言加快编辑器运行速度素材(1)场景人物(2)工具 一、人物移动和动画切换二、走路灰尘粒子效果探究实现 三、树木排序设计方法一方法二 四、绘制拿工具的角色动画五、砍树实现六、存储拾取物品引入Unity 的可序列化字典类 七、实现靠近收获物品自动吸附八、树木被砍掉的…

PMP考试备考:两个月时间足够吗?

PMP&#xff08;Project Management Professional&#xff09;认证是全球范围内最受认可的项目管理专业资格之一。对于想要提升项目管理技能和职业发展的人来说&#xff0c;PMP认证是一个重要的里程碑。然而&#xff0c;很多人担心备考时间不足以充分准备PMP考试。那么&#xf…

CFimagehost私人图床本地部署结合cpolar内网穿透实现公网访问

文章目录 1.前言2. CFImagehost网站搭建2.1 CFImagehost下载和安装2.2 CFImagehost网页测试2.3 cpolar的安装和注册 3.本地网页发布3.1 Cpolar临时数据隧道3.2 Cpolar稳定隧道&#xff08;云端设置&#xff09;3.3.Cpolar稳定隧道&#xff08;本地设置&#xff09; 4.公网访问测…

安防监控/视频云存储/视频智能分析:人员打架/扭打算法识别

随着社会压力激增&#xff0c;越来越多人们性格异常暴躁&#xff0c;一旦遇到摩擦与争执就很容易引起打架斗殴行为。配置TSINGSEE青犀人员打架识别算法的主要目的&#xff0c;是提高公共场所的安全性和减少危险事件的发生。通过使用打架识别算法&#xff0c;可以及时发现并识别…

Redis缓存与从数据取数据性能比较

Redis缓存与从数据取数据性能比较 为什么使用Redis 使用Redis缓存数据有多个原因&#xff0c;包括提高性能、降低数据库负载、减少响应时间和支持临时数据存储等。以下是一些主要原因以及Redis缓存的工作原理和好处&#xff1a; 1. 提高性能&#xff1a; 数据库查询通常是一…

APP推荐:安卓系统的开屏广告自动跳过助手

今天给大家推荐一款安卓系统的开屏广告自动跳过助手&#xff0c;感兴趣的朋友可以下载试试看&#xff01; 一、软件简介 安卓系统的开屏广告自动跳过助手 自动跳过软件的实现&#xff0c;一般都是基于安卓的Accessibility“无障碍服务”实现。开启了无障碍服务的软件&#xf…

【大数据开发技术】实验03-Hadoop读取文件

文章目录 Hadoop读取文件一、实验目标二、实验要求三、实验内容四、实验步骤 Hadoop读取文件 一、实验目标 熟练掌握hadoop操作指令及HDFS命令行接口掌握HDFS原理掌握HDFS的API使用方法掌握通过URL类读取HDFS上的文件内容的方法掌握FileSystem读取HDFS上文件内容的方法 二、…

【STM32学习】I2C通信协议 | OLED屏

&#x1f431;作者&#xff1a;一只大喵咪1201 &#x1f431;专栏&#xff1a;《STM32学习》 &#x1f525;格言&#xff1a;你只管努力&#xff0c;剩下的交给时间&#xff01; 今天需要将代码烧录到开发板中&#xff0c;本喵默认大家都会创建工程&#xff0c;以及进行基本的…

黄金代理如何选择平台?窍门在这儿

作为一个黄金代理平台&#xff0c;什么才是最重要的呢&#xff1f;笔者认为以下三个方面是最重要的&#xff0c;一个是资质&#xff0c;第二个是口碑&#xff0c;第三个是平台的软件。这三者是成为黄金代理要考虑的最重要的三个因素&#xff0c;也直接关系大黄金代理的职业生涯…

大模型股票交易-挖掘新闻和情绪价值

埃隆马斯克 (Elon Musk) 的星际飞船于 2023 年 4 月 20 日升空后爆炸。想象一下&#xff0c;当时您正在观察股市&#xff0c;突然出现新闻&#xff0c;您会如何交易 TSLA 股票&#xff1f; 我希望您不要与我争论&#xff0c;您作为交易者&#xff08;而不是投资者&#xff09;要…

基于Kubernetes的Serverless PaaS稳定性建设万字总结

作者&#xff1a;许成铭&#xff08;竞霄&#xff09; 数字经济的今天&#xff0c;云计算俨然已经作为基础设施融入到人们的日常生活中&#xff0c;稳定性作为云产品的基本要求&#xff0c;研发人员的技术底线&#xff0c;其不仅仅是文档里承诺的几个九的 SLA 数字&#xff0c…

【Redis】第6讲 Redis的启动和关闭

前端运行方式 进入/usr/local/bin目录下查看是否有redis-server rootsue-virtual-machine:/opt/redis-5.0.4# cd /usr/local/bin/ 然后启动redis-server服务器 rootsue-virtual-machine:/usr/local/bin# redis-server 后台运行方式 前端运行的话&#xff0c;界面中输入任何…