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

2023-11-10 TSelect组件新增虚拟列表多选功能及demo示例（即支持el-select-v2组件功能）

一、效果图

二、参数配置

1、代码示例：

<t-select
  placeholder="请选择工序"
  v-model="selectVlaue"
  :optionSource="state.stepList"
  valueCustom="label"
  @change="selectChange"
/>
1
2
3
4
5
6
7

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

2-1、paginationOption配置参数（Attributes）继承 el-pagination Attributes

3、继承 el-select&el-pagination&el-select-v2 events

三、具体代码

<template>
  <component
    :is="!useVirtual ? 'el-select' : 'el-select-v2'"
    popper-class="t_select"
    v-model="childSelectedValue"
    :options="!useVirtual ? null : optionSource"
    :style="{ width: width || '100%' }"
    v-bind="{
      clearable: true,
      filterable: true,
      multiple:multiple,
      ...$attrs,
    }"
  >
    <template v-for="(index, name) in slots" v-slot:[name]="data">
      <slot :name="name" v-bind="data" />
    template>
    <template v-if="!useVirtual">
      <el-checkbox
        v-if="multiple && !isShowPagination"
        v-model="selectChecked"
        @change="selectAll"
        class="all_checkbox"
      >全选el-checkbox>
      <el-option
        v-for="(item, index) in optionSource"
        :key="index + 'i'"
        :label="customLabel ? customLabelHandler(item) : item[labelCustom]"
        :value="item[valueCustom]"
      >el-option>
      <div class="t_select__pagination" v-if="isShowPagination">
        <el-pagination
          v-model:current-page="paginationOption.currentPage"
          v-model:page-size="paginationOption.pageSize"
          :layout="
            paginationOption.layout || 'total, prev, pager, next, jumper'
          "
          :pager-count="paginationOption.pagerCount"
          :total="paginationOption.total"
          v-bind="{
            small: true,
            background: true,
            ...$attrs,
            ...paginationOption.bind,
          }"
        />
      div>
    template>
  component>
template>

<script setup lang="ts" name="TSelect">
import { computed, useSlots } from 'vue'
const props: any = defineProps({
  modelValue: {
    type: [String, Number, Array],
  },
  // 是否多选
  multiple: {
    type: Boolean,
    default: false,
  },
  // 选择框宽度
  width: {
    type: String,
  },
  // 传入的option数组中，要作为最终选择项的键值key
  valueCustom: {
    type: String,
    default: 'key',
  },
  // 传入的option数组中，要作为显示项的键值名称
  labelCustom: {
    type: String,
    default: 'label',
  },
  // 是否自定义设置下拉label
  customLabel: {
    type: String,
  },
  // 下拉框组件数据源
  optionSource: {
    type: Array as unknown as any[],
    default: () => [],
  },
  // 是否显示分页
  isShowPagination: {
    type: Boolean,
    default: false,
  },
  // 分页配置
  paginationOption: {
    type: Object,
    default: () => {
      return {
        pageSize: 6, // 每页显示条数
        currentPage: 1, // 当前页
        pagerCount: 5, // 按钮数，超过时会折叠
        total: 0, // 总条数
      }
    },
  },
  // 是否开启虚拟列表
  useVirtual: {
    type: Boolean,
    default: false,
  },
})
const slots = useSlots()
// 抛出事件
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 = computed({
  get() {
    const _deval: any = props.modelValue
    return _deval?.length === props.optionSource.length
  },
  set(val: any) {
    return val?.length === props.optionSource.length
  },
})
// 点击全选
const selectAll = (val: any) => {
  const options = JSON.parse(JSON.stringify(props.optionSource))
  if (val) {
    const selectedAllValue = options.map((item) => {
      return item[props.valueCustom]
    })
    emits('update:modelValue', selectedAllValue)
  } else {
    emits('update:modelValue', null)
  }
}
// 自定义label显示
const customLabelHandler = (item) => {
  return eval(props.customLabel)
}
script>
<style lang="scss" scoped>
.t_select {
  .el-select-dropdown {
    .all_checkbox {
      margin-left: 20px;
    }
  }
}
style>


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159

四、组件地址

gitHub组件地址

gitee码云组件地址

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

五、相关文章

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

---

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