2023-10-10 TSelect组件新增虚拟列表功能（即支持el-select-v2组件功能）

2023-10-10 TSelect组件新增下拉选择分页功能

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

在这里插入图片描述

二、参数配置

1、代码示例：

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

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

参数	说明	类型	默认值
v-model	绑定值	boolean / string / number/Array	无
multiple	是否多选	Boolean	false
optionSource	下拉数据源	Array	无
customLabel	是否自定义设置下拉label	String	-
valueKey	传入的 option 数组中，要作为最终选择项的键值 key	String	'key'
labelKey	传入的 option 数组中，要作为显示项的键值名称	String	'label'
useVirtual	是否开启虚拟列表(继承el-select-v2属性)	Boolean	false
isShowPagination	是否开启分页	Boolean	false
paginationOption	分页配置	Object	-

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

参数	说明	类型	默认值
currentPage	当前页数	number	1
pageSize	每页显示条目个数	number	6
pagerCount	设置最大页码按钮数。页码按钮的数量，当总页数超过该值时会折叠	number	5
total	总条目数	number	0
layout	组件布局，子组件名用逗号分隔	string	'total, prev, pager, next, jumper'
bind	el-pagination属性	Object	-

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,
      ...$attrs,
    }"
    :multiple="multiple"
  >
    <template v-for="(index, name) in slots" v-slot:[name]="data">
      <slot :name="name" v-bind="data" />
    </template>
    <el-checkbox
      v-if="multiple"
      v-model="selectChecked"
      @change="selectAll"
      class="all_checkbox"
      >全选</el-checkbox
    >
    <template v-if="!useVirtual">
      <el-option
        v-for="(item, index) in optionSource"
        :key="index + 'i'"
        :label="customLabel ? customLabelHandler(item) : item[labelKey]"
        :value="item[valueKey]"
      ></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
  valueKey: {
    type: String,
    default: 'key',
  },
  // 传入的option数组中，要作为显示项的键值名称
  labelKey: {
    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.valueKey]
    })
    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>