vue3+Element-plus el-select 下拉选择 多选增加全选封装组件

一、效果图（含适用于条件查询组件中使用）

二、参数配置

1、代码示例：

<t-select
  placeholder="请选择工序"
  v-model="selectVlaue"
  :optionSource="state.stepList"
  valueKey="label"
  @change="selectChange"
/>

2、 配置参数（Attributes）继承 el-select Attributes

参数	说明	类型	默认值
v-model	绑定值	boolean / string / number/Array	无
multiple	是否多选	Boolean	false
optionSource	下拉数据源	Array	无
valueKey	传入的 option 数组中，要作为最终选择项的键值 key	String	‘key’
labelKey	传入的 option 数组中，要作为显示项的键值名称	String	‘label’

3、 继承 el-select events

三、具体代码

<template>
  <el-select
    popper-class="t_select"
    v-model="childSelectedValue"
    :style="{ width: width || '100%' }"
    v-bind="{ clearable: true, filterable: true, ...$attrs }"
    :multiple="multiple"
    @change="selectChange"
  >
    <el-checkbox
      v-if="multiple"
      v-model="selectChecked"
      @change="selectAll"
      class="all_checkbox"
      >全选el-checkbox
    >
    <el-option
      v-for="(item, index) in optionSource"
      :key="index + 'i'"
      :label="item[labelKey]"
      :value="item[valueKey]"
    >el-option>
  el-select>
template>
<script lang="ts">
export default {
  name: 'TSelect'
}
script>
<script setup lang="ts">
import { computed, watch, ref } from 'vue'
const props = defineProps({
  modelValue: {
    type: [String, Number, Array]
  },
  // 是否多选
  multiple: {
    type: Boolean,
    default: false
  },
  // 选择框宽度
  width: {
    type: String
  },
  // 传入的option数组中，要作为最终选择项的键值key
  valueKey: {
    type: String,
    default: 'key'
  },
  // 传入的option数组中，要作为显示项的键值名称
  labelKey: {
    type: String,
    default: 'label'
  },
  // 下拉框组件数据源
  optionSource: {
    type: Array<any>,
    default: () => []
  }
})
// 抛出事件
const emits = defineEmits(['update:modelValue'])
// vue3 v-model简写
let childSelectedValue: any = computed({
  get() {
    return props.modelValue
  },
  set(val) {
    // console.log(777, val)
    emits('update:modelValue', val)
  }
})
// 设置全选
const selectChecked: any = ref(false)
// 点击全选
const selectAll = (val: any) => {
  const options = JSON.parse(JSON.stringify(props.optionSource))
  if (val) {
    const selectedAllValue = options.map(item => {
      return item[props.valueKey]
    })
    emits('update:modelValue', selectedAllValue)
  } else {
    emits('update:modelValue', null)
  }
}
// 多选时，判断全选框是否选中
const selectChange = (val: any) => {
  // console.log('selectChange', val)
  if (props.multiple) {
    if (val.length === props.optionSource.length) {
      selectChecked.value = true
    } else {
      selectChecked.value = false
    }
  }
}
script>
<style lang="scss" scoped>
.t_select {
  .el-select-dropdown {
    .all_checkbox {
      margin-left: 20px;
    }
  }
}
style>

四、组件地址

gitHub组件地址

gitee码云组件地址

vue3+ts基于Element-plus再次封装基础组件文档

五、相关文章

基于ElementUi&antdUi再次封装基础组件文档

---

vue+element-plus的列表查询条件/筛选条件组件二次封装