vue3+Element-plus el-select 下拉分页选择 多选增加全选封装组件(TSelect组件新增虚拟列表多选功能及demo示例(即支持el-select-v2)功能)

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

在这里插入图片描述

一、效果图

在这里插入图片描述在这里插入图片描述

二、参数配置

1、代码示例:

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

2、配置参数(Attributes)继承 el-select&el-select-v2 Attributes

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

2-1、paginationOption配置参数(Attributes)继承 el-pagination Attributes

参数说明类型默认值
currentPage当前页数number1
pageSize每页显示条目个数number6
pagerCount设置最大页码按钮数。 页码按钮的数量,当总页数超过该值时会折叠number5
total总条目数number0
layout组件布局,子组件名用逗号分隔string‘total, prev, pager, next, jumper’
bindel-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,
      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>


四、组件地址

gitHub组件地址

gitee码云组件地址

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

五、相关文章

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


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

  • 3
    点赞
  • 16
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 7
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 7
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

wocwin

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值