zoukankan      html  css  js  c++  java
  • elementUI el-select 多选情况下包含全部选项,及获得选中项的label

    <template>
        <div>
        <span style="margin-left:30px;font-weight:bolder;">教练:
            <el-select v-model="staffId" 
              placeholder="请选择"
              multiple
              collapse-tags
              @change="changeStaff"
              style="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>    
  • 相关阅读:
    2020.08.28【周报】
    区间合并【排序、栈】
    1042 数字0-9的数量【解题数分DP】
    asp.net数据分页方法
    纯css面板插件,自适应,多样式
    c#winform图表控件使用示例
    使用妹子UI开发的体验分享
    阿里云储存代码整理(由三卷天书整理)
    测试程序的时候用到写参数或者错误日志的几个方法,用来方便发现错误
    fineUI表格控件各属性说明
  • 原文地址:https://www.cnblogs.com/wanf/p/10025343.html
Copyright © 2011-2022 走看看