VUE: rely on element-ui's el-select full selection component package

1. Requirements description

The drop-down box selection of VUE+Element-UI lacks the function of selecting all, which is inconvenient for users to operate. Gu encapsulates an el-select component that supports all selections

2. Component packaging

The component supports multiple selection of all, and provides multiple parameters to support configuration, including the name of the selected file.

<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. Example of use

Component references are referenced by importing components and declaring components:

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

Call method:

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

Parameter Description:

parameter	illustrate	value
:data	To populate the dropdown box data list set	[]
v-model	selected data set	[]
key	item key in the list	string
label	The item display value in the list	string
value	The value selected by item in the list	string
allLabel	Select all file names	string