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

1、需求描述

VUE+Element-UI的下拉框选择中缺少全选功能，不方便用户操作。顾封装一个支持全选的el-select的组件

2、组件封装

组件支持全部多选，提供多个参数支持配置，包括全选文件的名称。

<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>

3、使用样例

组件的引用，通过import组件和声明components来引用：

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

调用方式：

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

参数说明：

参数	说明	值
:data	要填充下拉框数据列表集	[]
v-model	选择的数据集	[]
key	列表中的item key	string
label	列表中的item 显示值	string
value	列表中的item 选择的值	string
allLabel	全选文件的名称	string