vue elementui中选择器（select）多选时添加全选功能_element ui的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
}