Vue+ElementUI 封装简易PaginationSelect组件
在实际开发工作中，经常会碰到当select下拉数据过需要做分页的情况
这里简单介绍封装的一个Pagination-Select组件几个步骤
封装的比较简易，可以根据自己的项目进行改动
- /components/Pagination-Select/index.vue
<template>
<div id="PaginationSelect">
<el-select
v-model="value"
:placeholder="selectOptions.placeholder"
:filterable="selectOptions.filterable"
:size="selectOptions.size"
:collapse-tags="selectOptions.collapseTags"
:multiple="selectOptions.multiple"
:clearable="selectOptions.clearable"
@change="selectChange">
<el-option
v-for="item in (selectOptions.selectData).slice((selectPage.currentPage - 1) * selectPage.pageSize, selectPage.currentPage * selectPage.pageSize)"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="selectPage.currentPage"
layout="prev, pager, next"
:page-size="selectPage.pageSize"
:total="selectOptions.selectData.length">
</el-pagination>
</el-select>
</div>
</template>
<script>
export default {
name: 'PaginationSelect',
props: {
selectOptions: {
type: Object,
default: () => {}
}
},
data () {
return {
selectPage: {
currentPage: 1,
pageSize: 3
},
value: ''
}
},
methods: {
selectChange (val) {
this.$emit('getSelectVal', val)
},
handleSizeChange (val) {
this.selectPage.pageSize = val
},
handleCurrentChange (val) {
this.selectPage.currentPage = val
}
}
}
</script>
<style lang="less">
.el-pagination {
display: flex;
justify-content: center;
}
</style> - demo项目，这边直接放在App.vue中使用
<template>
<div id="app">
<Pagination-Select :selectOptions="selectOptions" @getSelectVal="getSelectVal" />
</div>
</template>
<script>
import PaginationSelect from './components/Pagination-Select'
export default {
name: 'App',
components: { PaginationSelect },
data () {
return {
// select组件配置项
selectOptions: {
filterable: true,
clearable: true,
placeholder: '请选择aaa',
size: 'small',
multiple: false,
collapseTags: false,
selectData: []
}
}
},
created () {
this.querySelectData()
},
methods: {
querySelectData () {
setTimeout(() => {
this.selectOptions.selectData = [
{
value: '1',
label: '黄金糕'
},
{
value: '2',
label: '双皮奶'
},
{
value: '3',
label: '蚵仔煎'
},
{
value: '4',
label: '龙须面'
},
{
value: '5',
label: '北京烤鸭'
}
]
}, 2000)
},
getSelectVal (val) {
console.log(val, 'val')
}
}
}
</script>
<style lang="less">
#app {
display: flex;
justify-content: center;
}
</style> - 根据selectOptions配置项修改组件属性，父组件请求数据传入子组件进行渲染，当子组件出发change方法时
使用emit将所选的值回传父组件，进行后续代码逻辑
欢迎大家评论，如有帮助可以关注+收藏，我会经常更新博客，大家一起讨论学习