element中筛选框默认增加全选按钮

需求:下拉的时候需要增加全选按钮

参考以下连接:两个筛选框,第一个是想要的需求点

代码参考:

https://gitee.com/muwanqing_admin/vue-test/blob/master/src/components/select.vue

<template>
    <div class="select-height">
      <template>
        <el-select 
         v-model="value5" 
         multiple
         collapse-tags  
         @change="selectAll"
         placeholder="请选择">
            <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value">
            </el-option>
        </el-select>

        <el-select
    v-model="value11"
    multiple
    :multipleLimit=5
    collapse-tags
    style="margin-left: 20px;"
    placeholder="请选择">
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value">
    </el-option>
  </el-select>
      </template>
    </div>
</template>
           
<script>
export default{
   data() {
      return {
        options: [
          {
          value: '选项0',
          label: '所有选项'
          },    
          {
            value: '选项1',
            label: '黄金糕'
          }, {
            value: '选项2',
            label: '双皮奶'
          }, {
            value: '选项3',
            label: '蚵仔煎'
          }, {
            value: '选项4',
            label: '龙须面'
          }, {
            value: '选项5',
            label: '北京烤鸭'
          }],
        value5: [],
        value11:[],
        oldOptions: [[]]
      }
    },
    methods: {
      /**
       * 选择
       */
      selectAll(val) {
        let allValues = []
        //保留所有值
        for (let item of this.options) {
          allValues.push(item.value)
        }
        
        // 用来储存上一次的值，可以进行对比
        const oldVal = this.oldOptions.length === 1 ? [] : this.oldOptions[1]

        // 若是全部选择
        if (val.includes('选项0')) this.value5 = allValues

        // 取消全部选中  上次有 当前没有 表示取消全选
        if (oldVal.includes('选项0') && !val.includes('选项0')) this.value5 = []

        // 点击非全部选中  需要排除全部选中 以及 当前点击的选项 
        // 新老数据都有全部选中 
        if (oldVal.includes('选项0') && val.includes('选项0')) {
          const index = val.indexOf('选项0')
          val.splice(index, 1) // 排除全选选项
          this.value5 = val
        }

        //全选未选 但是其他选项全部选上 则全选选上 上次和当前 都没有全选
        if (!oldVal.includes('选项0') && !val.includes('选项0')) {
          console.log(11)
          if (val.length === allValues.length - 1) this.value5 = ['选项0'].concat(val)
        }

       //储存当前最后的结果 作为下次的老数据 
       this.oldOptions[1] = this.value5
      }
    }            
}
</script>
<style scoped>
   .select-height {
     height: 3000px;
   }         
</style>

效果查看:

http://muwanqing_admin.gitee.io/vue-test/#/select