elementUI el-select 多选情况下包含全部，大家都是怎么实现的？自己写么？

Question

在官网找了找，没有对应的示例和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>

自己写的

Answer 1

<el-select v-model="selectWeekDayAryProp" @change="selectChange" multiple>
  <el-option
    v-for="item in weekDayAry"
    :key="item.value"
    :label="item.label"
    :value="item.value">
  </el-option>
</el-select>


data() {
  return {
    selectWeekDayAryProp: this.selectWeekDayAry,
    isSelectAll: false,
    weekDayAry: _const.weekDayAry
  }
},

 if (this.isSelectAll) {
  // 只有下拉框的值发生了变化才会进入此方法
  // 如果之前选中了全部，则变化后肯定不包含全部了
  this.isSelectAll = false
  // 则删除第一个全部
  this.selectWeekDayAryProp.splice(0, 1)
} else {
  // 如果之前没有选中全部
  // 判断此次是否选中了全部
  this.isSelectAll = this.selectWeekDayAryProp.some(value => value === 0)
  // 如果此次选中了全部
  if (this.isSelectAll) {
    // 则去除其他，只保留全部，默认value=0 是全部
    this.selectWeekDayAryProp = [0]
  } else {
    // 如果当前不包含全部，则判断是否其他的七个日期全选了
    if (this.selectWeekDayAryProp.length === 7) {
      // 去过其他七个日期全选了，则也将当前置为全部
      this.selectWeekDayAryProp = [0]
      this.isSelectAll = true
    }
  }
}

}

Answer 2

加一个多选框 选中时候把所有值都丢到数组里面去 非选中把值清空。

Answer 3

您好 ，请问可不可以稍微把代码贴全一些呀？ 我也想要做这个功能，但是按照你这里的代码 我测试了没成功，感谢了！

Answer 4

您好，我用您这种方法实现的时候，如果先选择了全选，然后再选择其他的选项，依然会是全选的结果，这个应该怎么解决呢