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

╰半夏微凉° 2024-04-20 12:19 6阅读 0赞

#### 1、需求描述 ####

VUE+Element-UI的下拉框选择中缺少全选功能，不方便用户操作。顾封装一个支持全选的el-select的组件  
![在这里插入图片描述][f85bad41ff8d46ab84c266b017a5016e.png]

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

调用方式：

参数说明：

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

[f85bad41ff8d46ab84c266b017a5016e.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/20/f9a50523e18f4b9591f500e9dc651023.png