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

Dear 丶 2021-12-23 16:07 979阅读 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 条评论，979人围观）

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

相关阅读

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

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

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

相关 ElementUI Checkbox 多选框

一、概述适用于多个勾选框绑定到同一个数组的情景，通过是否勾选来表示这一组选项中选中的项。二、代码实现 test.vue <template>

我会带着你远行/ 2022年11月02日 15:29/ 0 赞/ 253 阅读

相关 elementUI table多选设置默认勾选

![20200914172226137.png_pic_center][] <el-table ref="multipleTableClinicRoo

刺骨的言语ヽ痛彻心扉/ 2022年10月16日 00:49/ 0 赞/ 436 阅读

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

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

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

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

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

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

相关获取select列表框所选中的全部选项的值

$("select").change(function()\{ var strSel = $("select").val().join(","); \}) <select

柔情只为你懂/ 2022年07月11日 17:59/ 0 赞/ 153 阅读

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

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

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

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

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

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

相关 Layui下拉框多选，动态加载选项并默认选中（IDEA简单详细）

1.导入必要的文件 <script src="../../lib/layui-v2.5.5/layui.js" th:src="@{/lib/layui-v2.5

蔚落/ 2021年08月13日 19:07/ 0 赞/ 575 阅读

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

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

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