elementUI el-select 多選情況下包含全部，大家都是怎么實現(xiàn)的？自己寫么？

在官網(wǎng)找了找，沒有對應(yīng)的示例和api

<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) {
      // 只有下拉框的值發(fā)生了變化才會進(jìn)入此方法
      // 如果之前選中了全部，則變化后肯定不包含全部了
      this.isSelectAll = false
      // 則刪除第一個全部
      this.selectWeekDayAryProp.splice(0, 1)
    } else {
      // 如果之前沒有選中全部
      // 判斷此次是否選中了全部
      this.isSelectAll = this.selectWeekDayAryProp.some(value => value === 0)
      // 如果此次選中了全部
      if (this.isSelectAll) {
        // 則去除其他，只保留全部，默認(rèn)value=0 是全部
        this.selectWeekDayAryProp = [0]
      } else {
        // 如果當(dāng)前不包含全部，則判斷是否其他的七個日期全選了
        if (this.selectWeekDayAryProp.length === 7) {
          // 去過其他七個日期全選了，則也將當(dāng)前置為全部
          this.selectWeekDayAryProp = [0]
          this.isSelectAll = true
        }
      }
    }
  }

自己寫的

回答

編輯回答

孤影

加一個多選框選中時候把所有值都丟到數(shù)組里面去非選中把值清空。

2018年9月4日 23:55

編輯回答

乖乖噠

<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) {
  // 只有下拉框的值發(fā)生了變化才會進(jìn)入此方法
  // 如果之前選中了全部，則變化后肯定不包含全部了
  this.isSelectAll = false
  // 則刪除第一個全部
  this.selectWeekDayAryProp.splice(0, 1)
} else {
  // 如果之前沒有選中全部
  // 判斷此次是否選中了全部
  this.isSelectAll = this.selectWeekDayAryProp.some(value => value === 0)
  // 如果此次選中了全部
  if (this.isSelectAll) {
    // 則去除其他，只保留全部，默認(rèn)value=0 是全部
    this.selectWeekDayAryProp = [0]
  } else {
    // 如果當(dāng)前不包含全部，則判斷是否其他的七個日期全選了
    if (this.selectWeekDayAryProp.length === 7) {
      // 去過其他七個日期全選了，則也將當(dāng)前置為全部
      this.selectWeekDayAryProp = [0]
      this.isSelectAll = true
    }
  }
}

}

2017年5月7日 06:12