elementUI el-select 多选情况下包含全部选项,及获得选中项的label

Dear 丶 2021-12-23 16:07 1027阅读 0赞

<template>
        <div>
        <span style="margin-left:30px;font-weight:bolder;">教练：
            <el-select v-model="staffId" 
              placeholder="请选择"
              multiple
              collapse-tags
              @change="changeStaff"
              style="width:180px">
              <el-option
                v-for="(item, key) in staff"
                :key="key"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>  
          </span>
        </div>
    </template>

<script>
      export default {
        data() {
          return {
            staffId: [-1],
            isContainAll: true,
            staffNmae: [],
            staff:  [
              { 'value': -1, 'nameCn': '全部' },
              { 'value': 1, 'nameCn': '张三' },
              { 'value': 2, 'nameCn': '李四'},
              { 'value': 3, 'nameCn': '王五' },
              { 'value': 4, 'nameCn': '潇潇' },
              { 'value': 5, 'nameCn': '小美'},
              { 'value': 6, 'nameCn': '赵琴' },
              { 'value': 7, 'nameCn': '张玲' }
            ]
          }
        },
        methods: {
          // 定义一个变量，用来存储当前下拉框是否选中了全部
          if (this.isContainAll) {
            // 只有下拉框的值发生了变化才会进入此方法
            // 如果之前选中了全部，则变化后肯定不包含全部了
            this.isContainAll = false
            // 则删除第一个全部
            this.staffId.splice(0, 1)
          } else {
            // 如果之前没有选中全部
            // 判断此次是否选中了全部
            this.isContainAll = this.staffId.some(value => value === -1)
            // 如果此次选中了全部
            if (this.isContainAll) {
              // 则去除其他，只保留全部，默认value=-1 是全部
              this.staffId = [-1]
            } else {
              // 如果当前不包含全部，则判断是否其他的七个日期全选了
              if (this.staffId.length === this.staff.length - 1) {
                // 如果其他员工全选了，则也将当前置为全部
                this.staffId = [-1]
                this.isContainAll = true
              }
            }
          }
          // 当没有选中任何教练时，将当前置为全部
          if (this.staffId.length === 0) {
            this.staffId = [-1]
            this.isContainAll = true
          }
          // 如果选择全部
          if (this.isContainAll === true) {
            this.staffName = ['全部']
          } else {
            // 获得选中教练的姓名
            for (let i = 0; i < this.staffId.length; i++) {
              let obj = this.staff.find((item) => {
                return item.value === this.staffId[i]
              })
              this.$set(this.staffName, i, obj.label)
            }
          }
      }
    </script>

转载于:https://www.cnblogs.com/web-chuanfa/p/10719655.html

发表评论取消回复

表情：

评论列表（有 0 条评论，1027人围观）

还没有评论，来说两句吧...

相关阅读

相关 jQuery获得select下拉列表选中项索引

在学习jQuery如何获取select选中的文本和值的时候发现还可以获取其选中项的索引，于是搜索了一下并记录。 $('\selectOne').find('optio

水深无声/ 2024年02月19日 14:22/ 0 赞/ 76 阅读

相关 Select Form List By Label关键字——模拟通过下拉列表的Label来选中指定的下拉列表的选项...

Select Form List By Label关键字——模拟通过下拉列表的Label来选中指定的下拉列表的选项；该关键字接收\[ locator | \la

喜欢ヅ旅行/ 2023年10月02日 08:26/ 0 赞/ 26 阅读

相关单选框部分选项禁用情况

element-ui 中 select 选项部分按钮需要显示但是不想让用户使用即禁用利用：disabled属性可以对数据进行处理将需要禁用的选项增加一个disa

太过爱你忘了你带给我的痛/ 2023年03月01日 09:59/ 0 赞/ 41 阅读

相关 elementUI模糊查询下拉选中

JS querySearch(queryString,cb) { if(queryString){ Api

约定不等于承诺〃/ 2023年02月25日 07:07/ 0 赞/ 10 阅读

相关 Elementui 多选框选择全部和取消选择

点击（不限），取消选中其他多选项。![20210316161626327.png][] 点击其他选择项，取消（不限）选中。![20210316161645300.p

爱被打了一巴掌/ 2022年11月10日 05:36/ 0 赞/ 889 阅读

相关 JQuery之子复选框全部选中则全选框选中

我为大家提供了六种方法供大家参考 $(".usertable td input[type='checkbox']").change(function (

客官°小女子只卖身不卖艺/ 2022年09月26日 11:52/ 0 赞/ 281 阅读

相关【Jquery】------ Jquery 实现click 选中checkbox 多选(或一键选中全部或取消全部)实例代码

> 1.Jquery 实现click 选中checkbox 多选(或一键选中全部或取消全部)实例代码 > 1.1 展示效果图: > > ![watermark_type_Z

╰半夏微凉°/ 2022年09月03日 00:07/ 0 赞/ 189 阅读

相关微信小程序---多项选中（单选）

index.wxml <view class='list'> <view class='colorList' bindtap='toggleBtn'

ゝ一纸荒年。/ 2022年03月09日 16:14/ 0 赞/ 264 阅读

相关 elementUI el-select 多选情况下包含全部选项,及获得选中项的label

<template> <div> <span style="margin-left:30px;font-weight:bolder;">

Dear 丶/ 2021年12月23日 16:07/ 0 赞/ 1028 阅读

相关选项卡点击多选，再次点击取消选中，选项卡变色（uni)

效果 ![在这里插入图片描述][20201218101530667.png_pic_center] js部分 redio_cli(e,ind){

一时失言乱红尘/ 2021年07月24日 16:03/ 0 赞/ 834 阅读