在实际开发工作中,经常会碰到当select下拉数据过需要做分页的情况这里简单介绍封装的一个Pagination-Select组件几个步骤封装的比较简易,可以根据自己的项目进
在实际开发工作中,经常会碰到当select下拉数据过需要做分页的情况
这里简单介绍封装的一个Pagination-Select组件几个步骤
封装的比较简易,可以根据自己的项目进行改动
<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>
<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>
到此这篇关于Vue+ElementUI 封装简易PaginationSelect组件的文章就介绍到这了,更多相关Vue ElementUI封装PaginationSelect组件内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!
--结束END--
本文标题: Vue+ElementUI 封装简易PaginationSelect组件的详细步骤
本文链接: https://www.lsjlt.com/news/171961.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑,方便收藏和打印~
2024-01-12
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
0