使用vue的分页实现自定义分页、多个slot的处理方案
使用vue的分页实现自定义分页、多个slot的处理方案由于vue的标签el-pagination当中的layout只能存在一个自定义slot,所以当需要自定义多个slot时,就考虑用多个el-pagination拼接到一起,比如要实现如下需求其中当前第几页共几页、 首页、尾页三个地方是自定义的slot,所以拆成三个独立的el-pagination,局部代码如下`...
·
由于vue的标签el-pagination当中的layout只能存在一个自定义slot,所以当需要自定义多个slot时,就考虑用多个el-pagination拼接到一起,比如要实现如下需求
从组件库中的分页改造
其中当前第几页共几页 、 首页(可点击)、尾页(可点击)三个地方是自定义的slot,所以拆成三个独立的el-pagination,layout分别为(total,slot,sizes)(slot)(prev, pager, next, slot, jumper)对应下图红色方框的三个部分
由于系统多处使用分页所以此处将他抽取为组件以供方便使用。组件完整代码如下
<template>
<div class="app-container calendar-list-container">
<div class="pagination-container" style="float: left;margin-bottom: 30px">
<el-pagination background @size-change="handleSizeChange"
@current-change="handleCurrentChange"
:page-sizes="pageSizes" :page-size="limit"
layout="total, slot, sizes" :total="total" style="float: left;">
<span>{{'当前第' + page + '页' + ', ' + '共' + this.lastPage + '页'}}</span>
</el-pagination>
<el-pagination background @size-change="handleSizeChange" :firstPage="firstPage"
@current-change="handleCurrentChange"
:page-sizes="[20,100,300, 500]" :page-size="limit"
layout="slot" :total="total" style="float: left;">
<el-button
:disabled="page === firstPage"
class="first-pager"
@click="toFirstPage"
>首页</el-button>
</el-pagination>
<el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
:current-page="page" :page-sizes="pageSizes"
:page-size="limit" :lastPage="lastPage"
layout="prev, pager, next, slot, jumper" :total="total"style="float: left;margin-left: -10px;">
<el-button
:disabled="page === lastPage"
class="first-pager"
@click="toLastPage"
>尾页</el-button>
</el-pagination>
<el-button circle @click="handleGo">{{'go'}}</el-button>
</div>
</div>
</template>
<script>
export default {
name: 'pagination',
props: { // 父页面传值
page: {
type: Number
},
limit: {
type: Number
},
total: {
type: Number
},
pageSizes: {
type: String
}
},
data() {
return {
firstPage: 1,
lastPage: 1
}
},
created() {
},
computed: {
lastPage: function() { return Math.ceil(this.total / this.limit) }
},
methods: {
// 首页
toFirstPage() {
this.$emit('handleChildGetList', this.firstPage, this.limit)
},
// 尾页
toLastPage() {
this.$emit('handleChildGetList', this.lastPage, this.limit)
},
// 响应数据列表选择页面显示记录数事件
handleSizeChange(val) {
this.$emit('handleChildGetList', 1, val)
},
// 响应数据列表选择页码事件
handleCurrentChange(val) {
this.$emit('handleChildGetList', val, this.limit)
},
// 响应go事件
handleGo() {
this.$emit('handleChildGetList', this.page, this.limit)
}
}
}
</script>
要调用时需要传(page、limit、total、pageSizes)给子组件,从子组件传回handleChildGetList
<pagination :page="antiWaterListQuery.page" :limit="antiWaterListQuery.limit" :total="total"
:pageSizes="[20,100,300, 500]" v-on:handleChildGetList="handleParentGetList"> </pagination>
// 引入
import pagination from '../common/components/pagination'
components: {
pagination
},
// 响应分页组件查询事件
handleParentGetList(page, limit) {
this.antiWaterListQuery.page = page
this.antiWaterListQuery.limit = limit
// 调用查询方法
this.getConfigList()
},
调用主要是这几处内容
更多推荐
已为社区贡献1条内容
所有评论(0)