vue——下拉选择框新增全选选项

elementUI原本组件

elementUI原本组件是没有全选这个选项的

实现效果

我们要实现的就是把全选选项给它加上

实现代码

<template>
  <el-select
    v-model="selectValue"
    collapse-tags
    multiple
    placeholder="请选择"
    @change="selectAll"
  >
    <el-option
      v-for="(item, index) in options"
      :key="index"
      :label="item.label"
      :value="item.value"
    />
  </el-select>
</template>

<script>
export default {
  name: 'Select',
  data() {
    return {
      options: [
          {
            value: 'ALL_SELECT',
            label: '全选'
          },
          {
            value: 0,
            label: '选项一'
          },
          {
            value: 1,
            label: '选项二'
          },
          {
            value: 2,
            label: '选项三'
          }
        ],
      selectValue: [],
      oldOptions: []
    }
  },
  methods: {
    selectAll(val) {
      const allValues = []
      // 保留所有值
      for (const item of this.options) {
        allValues.push(item.value)
      }
      // 用来储存上一次的值，可以进行对比
      const oldVal = this.oldOptions.length === 1 ? this.oldOptions[0] : []
      // 若是全部选择
      if (val.includes('ALL_SELECT')) this.selectValue = allValues
      // 取消全部选中 上次有 当前没有 表示取消全选
      if (oldVal.includes('ALL_SELECT') && !val.includes('ALL_SELECT')) { this.selectValue = [] }
      // 点击非全部选中 需要排除全部选中 以及 当前点击的选项
      // 新老数据都有全部选中
      if (oldVal.includes('ALL_SELECT') && val.includes('ALL_SELECT')) {
        const index = val.indexOf('ALL_SELECT')
        val.splice(index, 1) // 排除全选选项
        this.selectValue = val
      }
      // 全选未选 但是其他选项全部选上 则全选选上 上次和当前 都没有全选
      if (!oldVal.includes('ALL_SELECT') && !val.includes('ALL_SELECT')) {
        if (val.length === allValues.length - 1) { this.selectValue = ['ALL_SELECT'].concat(val) }
      }
      // 储存当前最后的结果 作为下次的老数据
      this.oldOptions[0] = this.selectValue
    }
  }
}
</script>