vue elementui中選擇器（select）多選時添加全選功能

存在這樣一個問題，當下拉清單中的選項過多時，想要全部選中，目前elementui的select多選中沒有提供全選功能，想要解決這個問題分為以下步驟

• 首先将從背景擷取過來的下拉清單資料中添加一個”全選“的選項
• 當選中項發生變化時進行一系列判斷

          1、目前選中資料中存在’全選‘的選項，則将下拉資料指派給v-model綁定的資料

          2、與舊資料（上次選中資料）進行對比，若舊資料包含'全選'，目前選中資料不包含全選，則将通過v-model綁定的資料置空

          3、若舊資料包含'全選'，目前選中資料包含全選，則将目前選中的資料排除’全選‘選項，并将目前選中資料賦給v-model綁定的資料

          4、若舊資料不包含'全選'，目前選中資料不包含'全選'，并且除了’全選‘外其他選項全部選中（這是就相當于全選），則将全部選中資料與’全選‘這個選項全部賦給v-model綁定的資料

接下來上具體代碼啦！！！

<el-select collapse-tags multiple v-model="value" filterable placeholder="請選擇" @change="selectAll" clearable>
  <el-option
    v-for="item in options"
    :key="item.id"
    :label="item.label"
    :value="item.id"
  />
</el-select>
           

将下拉清單資料添加一個”全選“的選項(這個可以在擷取背景資料後進行)

const allSelect = {
  label: '全選',
  id: 'allSelect'
}
this.options.unshift(allSelect) // options是綁定到下拉清單中選項，unshift()方法是從資料的上面插入一條資料，保證’全選‘在第一條
           

當選中值發生變化時觸發的方法 

selectAll(valArr) {
  const allIdArr = []
  // 儲存所有選項的id
  for (const argumentId of this.options) {
    allIdArr.push(argumentId.id)
  }
  const oldVal = this.oldOptions.length === 1 ? this.oldOptions[0] : []
  // 目前選中的有'全選'
  if (valArr.includes('allSelect')) {
    this.value = allIdArr
  }
  // 舊資料包含'全選'，目前選中資料不包含全選
  if (oldVal.includes('allSelect') && !valArr.includes('allSelect')) {
    this.value = []
  }
  // 舊資料包含'全選'，目前選中資料包含全選
  if (oldVal.includes('allSelect') && valArr.includes('allSelect')) {
    const index = valArr.indexOf('allSelect')
    valArr.splice(index, 1) // 排除全選選項
    this.value = valArr
  }
  // 舊資料不包含'全選'，目前選中資料不包含'全選'
  if (!oldVal.includes('allSelect') && !valArr.includes('allSelect')) {
    console.log(11)
    // 除了全選外 其他全部選中時
    if (valArr.length === allIdArr.length - 1) {
      this.value = ['allSelect'].concat(valArr)
    }
  }
  // 資料發生變化時儲存資料，作為下次對比的舊資料
  this.oldOptions[0] = this.value
}