vue+ElementUI el-select实现下拉列表分页的功能（下拉分页组件---新增多选功能及默认值回显示例）_el-select 分页

最后

基础知识是前端一面必问的，如果你在基础知识这一块翻车了，就算你框架玩的再6，webpack、git、node学习的再好也无济于事，因为对方就不会再给你展示的机会，千万不要因为基础错过了自己心怡的公司。前端的基础知识杂且多，并不是理解就ok了，有些是真的要去记。当然了我们是牛x的前端工程师，每天像背英语单词一样去背知识点就没必要了，只要平时工作中多注意总结，面试前端刷下题目就可以了。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

1、代码示例

<t-pagination-select
 v-model="materialId"
 :optionSource="materialIdArr"
 labelKey="materialName"
 valueKey="id"
 :paginationOption="setSelectPage"
 />

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

参数	说明	类型	默认值
v-model	绑定值	boolean / string / number/Array	-
optionSource	下拉数据源	Array	-
width	select宽度（可以设置百分比或px）	String	100%
valueKey	传入的 option 数组中，要作为最终选择项的键值 key	String	‘key’
labelKey	传入的 option 数组中，要作为显示项的键值名称	String	‘label’
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’
bind	el-pagination属性	Object	-

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

四、源码

<template>
  <el-select
 popper-class="t\_pagination\_select"
 v-model="childSelectedValue"
 :style="{width: width||'100%'}"
 v-bind="attrs"
 v-on="$listeners"
 >
    <el-option
 v-for="item in optionSource"
 :key="item[valueKey]"
 :label="item[labelKey]"
 :value="item[valueKey]"
 ></el-option>
    <el-pagination
 :layout="paginationOption.layout || 'total,prev, pager, next'"
 :page-size="paginationOption.pageSize"
 :current-page="paginationOption.currentPage"
 :pager-count="paginationOption.pagerCount"
 :total="paginationOption.total"
 v-bind="{
 small: true,
 'hide-on-single-page':true,
 background: true,
 ...$attrs,
 ...paginationOption.bind,
 }"
 v-on="$listeners"
 />
  </el-select>
</template>

<script>

export default {
 name: 'TPaginationSelect',
 props: {
 value: {
 type: [String, Number, Array]
 },
 // 选择框宽度
 width: {
 type: String
 },
 // 传入的option数组中，要作为最终选择项的键值名称
 valueKey: {
 type: String,
 default: 'key'
 },
 // 传入的option数组中，要作为显示项的键值名称
 labelKey: {
 type: String,
 default: 'label'
 },
 // 下拉框组件数据源
 optionSource: {
 type: Array
 },
 // 分页配置项
 paginationOption: {
 type: Object,
 default: () => {
 return {
 pageSize: 6, // 每页显示条数
 currentPage: 1, // 当前页
 pagerCount: 5, // 按钮数，超过时会折叠
 total: 0 // 总条数
 }
 }


### 最后

为了帮助大家更好的了解前端，特别整理了《前端工程师面试手册》电子稿文件。

**[开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/topics/618166371)**

![](https://img-blog.csdnimg.cn/img_convert/ebac2ab824bae173dc22054a17212598.png)

![](https://img-blog.csdnimg.cn/img_convert/5230c48fd0fcb265f3401a21603bda2b.png)