VUE：依赖element-ui的el-select全选组件封装

<template>
  <el-select v-model="selected"
             :collapse-tags="collapseTags"
             :multiple="multiple"
             :popper-append-to-body="false"
             class="all-select-box">
    <el-option v-if="multiple && data.length"
               id="select-all"
               ref="all"
               :class="{'selected': isSelectedAll,'divide-line': divideAll}"
               :label="allLabel"
               disabled
               value="@all"
               @click.stop.native="isSelectedAll = !isSelectedAll">
    </el-option>
    <el-option v-for="item in data"
               :key="item[key]"
               :label="item[label]"
               :value="item[_value]">
    </el-option>
  </el-select>
</template>


<script>
  export default {
    name: 'SelectAll',
    model: {
      prop: 'value',
      event: 'v-model'
    },
    props: {
      // 全选框绑定值
      value: {
        type: Array,
        default: []
      },


      // 全选框数据
      data: {
        type: Array,
        default: []
      },


      // 全选按钮标题
      allLabel: {
        type: String,
        default: '全部'
      },


      // 是否用线将全选与其它选项分割
      divideAll: {
        type: Boolean,
        default: false
      },


      // 全选框对应配置
      option: {
        type: Object,
        default: () => ({
          // 设置label对应字段
          key: 'key',
          // 设置label对应字段
          label: 'label',
          // 设置value对应字段
          value: 'value'
        })
      },


      // el-select原生属性
      multiple: {
        type: Boolean,
        default: true
      },
      collapseTags: {
        type: Boolean,
        default: true
      }
    },
    computed: {
      // 当前的选中项列表
      selected: {
        get() {
          return this.value
        },
        set(v) {
          this.$emit('v-model', v)
        }
      },
      // 当前是否全选
      isSelectedAll: {
        get() {
          return this.data.every(i => this.selected.includes(i[this._value]))
        },
        set(v) {
          this.$emit('v-model', v ? this.data.map(i => i[this._value]) : [])
        }
      },
      key(){
        return this.option.key
      },
      label() {
        return this.option.label
      },
      _value() {
        return this.option.value
      },
    },
  }
</script>


<style scoped>
  #select-all {
    cursor: pointer;
  }


  .divide-line {
    border-bottom: 1px solid rgba(123, 123, 123, .1);
  }


  #select-all:not(.selected) {
    color: #606266;
  }


  deep/ .el-select-dropdown__item.hover {
    background-color: transparent !important;
  }


  #select-all:hover, deep/ .el-select-dropdown__item:hover {
    background-color: #f5f7fa !important;
  }
</style>

  import SelectAll from "@/components/SelectAll";
  export default{
      components: {
        SelectAll
        }
    }

<SelectAll v-model="queryParam.Nos"
          :data="dataList"
          :option="{key:'no', label: 'name', value: 'no'}">
</SelectAll>