使用 Element-ui的 el-select组件时，如果下拉选项过多，一是查找选项困难，二是数据量超大（比如1w+）组件直接会卡死，所以考虑做一个带分页的下拉选择器（样式还可以再优化）文章来源：https://www.toymoban.com/news/detail-667893.html
效果图
文章来源地址https://www.toymoban.com/news/detail-667893.html
组件代码
<template>
<el-select
:size="size"
v-model="value"
@change="handleChange">
<div v-loading="loading">
<el-input
class="select-input"
:size="size"
prefix-icon="el-icon-search"
:placeholder="placeholder"
v-model="filterText"
@change="handleFilter">
</el-input>
<el-option
value=""
label="全部" />
<el-option
v-for="o in options"
:key="o[value]"
:label="o[props.label]"
:value="o[props.value]" />
<el-pagination
v-if="pagination.show"
class="mt12 w100 base select-pagination"
@current-change="handleCurrentChange"
:current-page.sync="pagination.current"
:page-size="pagination.size"
:layout="pagination.layout"
:total="pagination.total" />
<p v-if="pagination.show" class="page-size">10条/页</p>
</div>
</el-select>
</template>
<script>
export default {
props: {
props: {
type: Object,
default: () => ({
label: 'label',
value: 'value',
}),
},
options: {
type: Array,
default: () => [],
},
placeholder: {
type: String,
default: '搜索',
},
size: {
type: String,
default: 'small',
},
pagination: {
type: Object,
default: () => ({
show: true,
current: 1,
size: 10,
total: 0,
layout: 'prev, next',
}),
},
loading: {
type: Boolean,
default: false,
},
},
data() {
return {
value: '',
filterText: '',
};
},
mounted() {
},
methods: {
// 初始化数据
initData() {
this.value = '';
this.filterText = '';
},
// 切换页码
handleCurrentChange() {
this.$emit('getOptions');
},
// 切换选项
handleChange() {
this.$emit('selectValue', this.value);
},
// 筛选选项
handleFilter() {
this.$emit('getOptions', this.filterText);
},
},
};
</script>
<style lang="scss" scoped>
.select-input{
padding: 0 12px;
box-sizing: border-box;
margin-bottom: 12px;
::v-deep .el-input__inner {
border: none;
border-bottom: 1px solid #EBEBEB;
border-radius: 0;
}
}
.select-pagination {
text-align: center;
::v-deep .btn-prev {
padding-right: 30px;
.el-icon::before {
content: "\e792",
}
}
::v-deep .btn-next {
padding-left: 30px;
.el-icon::before {
content: "\e791",
}
}
}
.page-size {
color: $color-text;
font-size: 12px;
height: 32px;
line-height: 32px;
text-align: center;
margin-top: -32px;
}
</style>
父组件调用
<template>
<PaginationSelect
ref="paginationSelect"
:props="{ label: 'name', value: 'id' }"
:options="optionList"
:pagination="pagination"
:loading="loading"
@getOptions="getOptionList"
@selectValue="selectData" />
</template>
<script>
export default {
data() {
return {
optionList: '',
dataSelected: null,
pagination: {
show: true,
current: 1,
size: 10,
total: 0,
layout: 'prev, next',
},
loading：'',
};
},
mounted() {
},
methods: {
// 分页请求下拉选项
getOptionList(keyword) {
this.loading = true
const { current, size } = this.pagination
const params = {
keyword,
current,
size,
};
requestApi(params).then(res => {
if (res.code === '200') {
const { list, total } = res.data;
this.optionList = list;
this.pagination.total = total;
} else {
this.$message.error(res.message || '获取下拉选项失败');
}
}).finally(() => {
this.loading = false
})
},
// 选中下拉选项
selectData(val) {
this.dataSelected = val;
},
},
};
</script>
到了这里，关于基于Element-ui 封装带分页的下拉选择器组件的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
