使用 Element-ui的 el-select组件时，如果下拉选项过多，一是查找选项困难，二是数据量超大（比如1w+）组件直接会卡死，所以考虑做一个带分页的下拉选择器（样式还可以再优化）

效果图

组件代码

<template><el-select:size="size"v-model="value"@change="handleChange"><div v-loading="loading"><el-inputclass="select-input":size="size"prefix-icon="el-icon-search":placeholder="placeholder"v-model="filterText"@change="handleFilter"></el-input><el-optionvalue=""label="全部" /><el-optionv-for="o in options":key="o[value]":label="o[props.label]":value="o[props.value]" /><el-paginationv-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><PaginationSelectref="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 = trueconst { current, size } = this.paginationconst 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 封装带分页的下拉选择器组件相关推荐

elementui树状菜单tree_Vue+Element UI 树形控件整合下拉功能菜单（tree + dropdown +input）...
这篇博客主要介绍树形控件的两个小小的功能: 下拉菜单输入过滤框以CSS样式为主,也会涉及到Vue组件和element组件的使用. 对于没有层级的数据,我们可以使用表格或卡片来展示.要展示或建立层级 ...
【Element ui 的NavMenu二级菜单下拉icon修改】
Element ui 的NavMenu二级菜单下拉icon修改原来是这样的,下拉icon在右边修改成icon在左边,并更改icon的形状修改icon的css属性,覆盖原来的.需要注意的是取消打开 ...
element ui中的el-dropdown（下拉框）防止点一下就隐藏的问题
element ui中的el-dropdown(下拉框)防止点一下就影藏的问题当使用el-dropdown下拉框时,下拉框的每项中,可能需要加入@click.@change或复选框等事件,而el-d ...
Vue+Element UI 树形控件整合下拉功能菜单（tree + dropdown +input）
这篇博客主要介绍树形控件的两个小小的功能: 下拉菜单输入过滤框以CSS样式为主,也会涉及到Vue组件和element组件的使用. 对于没有层级的数据,我们可以使用表格或卡片来展示.要展示或建立层级 ...
vue uniapp通用省市下拉选择器组件布局样式可灵活根据ui变更 (区域可根据数组嵌套的格式继续往下模仿即可)
本人是uniapp写的 vue使用的话直接把view标签改为div即可但是uniapp也可以不写view直接使用div(view遵从语法标准) <template><view cl ...
element UI 制作带快捷选项的时间选择器
如上图所示,带有快捷键的日期选择器: (1)设置快捷选项 View Code <el-date-pickerv-model="createTime"type="da ...
vue使用element ui实现下拉列表分页的功能！！！
" 大家好,我是雄雄,欢迎关注微信公众号:雄雄的小课堂. " 前几天做了个功能,需求是使用利用element ui如何给下拉列表分页,经过网上查找,自己摸索,已经完成,今天来记录一 ...
element ui实现前端分页
element ui里的分页组件: <el-pagination@size-change="handleSizeChange"@current-change="ha ...
微信小程序原生开发功能合集二：下拉选择组件封装
本章实现小程序中下拉选择组件的封装实现,通过自定义组件的方式实现下拉选择功能,使用小程序的picker组件实现下拉数据的展示及相关自定义处理,封装数据加载过程,数据切换逻辑监听等. 本节实现s ...

基于Element-ui 封装带分页的下拉选择器组件

效果图

组件代码

父组件调用

基于Element-ui 封装带分页的下拉选择器组件相关推荐

最新文章

热门文章