账号密码登录
微信安全登录
微信扫描二维码登录

登录后绑定QQ、微信即可实现信息互通

手机验证码登录
找回密码返回
邮箱找回 手机找回
注册账号返回
其他登录方式
分享
  • 收藏
    X
    elementUI el-select 多选情况下包含全部,大家都是怎么实现的?自己写么?
    33
    0

    在官网找了找,没有对应的示例和api

    <template>
      <el-select class="g-public-multi-select" v-model="selectWeekDayListProp" :disabled="disabled" @change="selectChange" multiple>
        <el-option
          v-for="item in weekDayAry"
          :key="item.value"
          :label="item | getName"
          :value="item.value">
        </el-option>
      </el-select>
    </template>
    <style>
      .el-select__tags {
        max-width: 375px !important;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }
    
    </style>
    
    <script>
      import _const from '@/utils/constants'
    
      export default {
        name: 'weekDayMultipleSelect',
        props: ['selectWeekDayList', 'disabled'],
        data() {
          return {
            selectWeekDayListProp: this.selectWeekDayList,
            isContainAll: true,
            weekDayAry:  [
              { 'value': 0, 'nameCn': '全部', 'nameEn': 'All' },
              { 'value': 1, 'nameCn': '周一', 'nameEn': 'Monday' },
              { 'value': 2, 'nameCn': '周二', 'nameEn': 'Tuesday' },
              { 'value': 3, 'nameCn': '周三', 'nameEn': 'Wednesday' },
              { 'value': 4, 'nameCn': '周四', 'nameEn': 'Thursday' },
              { 'value': 5, 'nameCn': '周五', 'nameEn': 'Friday' },
              { 'value': 6, 'nameCn': '周六', 'nameEn': 'Saturday' },
              { 'value': 7, 'nameCn': '周日', 'nameEn': 'Sunday' }
            ]
          }
        },
        filters:{
            getName(item) {
              if (item === null) return
              if (store.getters.lang === 'zh') {
                return item.nameCn
              } else {
                return item.nameEn
              }
            }
        },
        methods: {
          // 当周日期下拉框的值改变时触发的方法,
          selectChange() {
            // 定义一个变量,用来存储当前下拉框是否选中了全部
            if (this.isContainAll) {
              // 只有下拉框的值发生了变化才会进入此方法
              // 如果之前选中了全部,则变化后肯定不包含全部了
              this.isContainAll = false
              // 则删除第一个全部
              this.selectWeekDayListProp.splice(0, 1)
            } else {
              // 如果之前没有选中全部
              // 判断此次是否选中了全部
              this.isContainAll = this.selectWeekDayListProp.some(value => value === 0)
              // 如果此次选中了全部
              if (this.isContainAll) {
                // 则去除其他,只保留全部,默认value=0 是全部
                this.selectWeekDayListProp = [0]
              } else {
                // 如果当前不包含全部,则判断是否其他的七个日期全选了
                if (this.selectWeekDayListProp.length === 7) {
                  // 去过其他七个日期全选了,则也将当前置为全部
                  this.selectWeekDayListProp = [0]
                  this.isContainAll = true
                }
              }
            }
            // 当没有选中任何周日期时,将当前置为全部
            if (this.selectWeekDayListProp.length === 0) {
              // 去过其他七个日期全选了,则也将当前置为全部
              this.selectWeekDayListProp = [0]
              this.isContainAll = true
            }
            this.$emit('update:selectWeekDayList', this.selectWeekDayListProp)
            this.$emit('change')
          }
        }
      }
    </script>
    

    自己写的

    0
    打赏
    收藏
    点击回答
        全部回答
    • 0
    • 真矢马也 普通会员 1楼

      在Element UI的el-select组件中,我们可以设置multi属性为true来实现多选功能。当设置为true时,el-select组件会包含所有选项,并且可以通过索引来获取选中的选项。

      例如:

      ```html <el-select v-model="value" multiple placeholder="选择多个"

      <el-option v-for="(item, index) in options" :key="index" :label="item.label" :value="item.value"

      ```

      在上面的代码中,options是一个包含多个选项的数组。每个选项的value属性被设置为数组中的某个值,而label属性被设置为数组中的某个字符串。

      如果你想添加一个选择框来获取选中的选项,你可以添加一个select元素:

      ```html <el-select v-model="value" multiple placeholder="选择多个"

      <el-option v-for="(item, index) in options" :key="index" :label="item.label" :value="item.value"

      ```

      在这个例子中,select元素会被添加到el-select组件中,用于获取选中的选项。

    更多回答
    扫一扫访问手机版
    • 回到顶部
    • 回到顶部