vue2.0自定义分页组件
显示效果:
调用分页组件的方法
<div class="data-page">
<div>
<el-pagination
background
layout="sizes,prev, pager, next"
:total="page.total"
:page-sizes="[5,10, 15, 20, 50]"
:current-page.sync="page.pageNum"
:page-size.sync="page.pageSize"
@size-change="init"
@current-change="init"
/>
<pageBar
:total.sync="page.total"
:pageNum.sync="page.pageNum"
:pageSize="page.pageSize"
:color="page.color"
:changePageNum="changePageNum"
:refreshData="init">
</pageBar>
</div>
</div>
//导入分页栏组件
import pageBar from '@/components/table_ex/cwgisPageBar';
//
export default{
components: {
pageBar,
},
data() {
return {
tableData: [],
searchValue:'',
page: {
count: 3, //总页数
total: 15, //总个数
pageSize: 5, //每页个数
pageNum: 1, //当前页
color:'000000',
//
},
//
};
},
methods: {
changePageNum(t_pageNum)
{
this.page.pageNum=t_pageNum;
},
init()
{
var that = this;
var userAcc = api.getLoginAccount();
var userName = api.getLoginName();
//
//组合查询sql语句
var sql = "select * from xc_wg_wgxx ";
if(that.searchValue && that.searchValue!="")
{
sql+=" where mc like '%"+that.searchValue+"%'";
}
sql+=" order by id desc";
//
api.getDataPage_sql(
sql,
this.page.pageSize,
this.page.pageNum,
function (r) {
// debugger;
if (r.success) {
that.tableData = r.data.rows;
that.page.total = r.data.total;
} else {
alert(r.msg);
}
}
);
},
}
}
自定义的分页组件cwgisPageBar.vue
<template>
<!--分页-->
<div>
<img :src="haseFirst? 'images/pagebar/first.png':'images/pagebar/first_h.png'" @click="gotoFirstPage" :style="firstSylye">
<img :src="haseFirst? 'images/pagebar/pre.png':'images/pagebar/pre_h.png'" @click="pageSub" :style="firstSylye">
<input ref="refindex" type="text" v-model="pageNum" @blur="checkpageTemIndex">
<span> / {{count}}页 总{{total}}</span>
<img :src="haseLast? 'images/pagebar/next.png':'images/pagebar/next_h.png'" @click="pageAdd" :style="lastSylye">
<img :src="haseLast? 'images/pagebar/last.png':'images/pagebar/last_h.png'" @click="gotoEndPage" :style="lastSylye">
</div>
</template>
<script>
export default {
name: "cwgisPageBar",
props: ['page-sizes','total','pageSize','pageNum','refreshData','changePageNum','color'],
data() {
return {
firstSylye:'',
lastSylye:'',
haseFirst:false, //第一页
haseLast:false, //最后一页
//
count:3, //总页数
}
},
watch: {
'pageNum'() {
this.checkPageIndex();
},
'count'() {
this.checkPageIndex();
},
'total'() {
this.totalChange();
},
},
created() {
// if (this.page) {
// this.pageTem = this.page;
// }
this.checkPageIndex();
},
mounted(){
var t_color=this.color;
if(!t_color)
{
t_color="000000";
}
this.$refs.refindex.style.color="#"+t_color;
},
methods: {
gotoFirstPage()
{
this.changePageNum(1);
this.refreshData();
},
gotoEndPage()
{
this.changePageNum(this.count);
this.refreshData();
},
totalChange()
{
this.count = Math.ceil(this.total/this.pageSize);
this.checkPageIndex();
},
checkpageTemIndex() {
this.pageTemAdd(this.pageNum, 0);
this.refreshData();
},
checkPageIndex(){
this.haseFirst = this.pageNum > 1;
this.haseLast = this.pageNum < this.count;
if(this.haseFirst){
this.firstSylye = 'cursor: pointer;';
}else{
this.firstSylye = 'cursor: not-allowed;';
}
if(this.haseLast){
this.lastSylye = 'cursor: pointer;';
}else{
this.lastSylye = 'cursor: not-allowed;';
}
this.setInputWidth();
},
/**
* 设置输入框宽度
*/
setInputWidth() {
let refindex = this.$refs.refindex;
if( refindex && refindex.style){
let width = (this.pageNum + "").length * 13;
if (width > 30) {
refindex.style.width = width + "px";
}else{
refindex.style.width = 30 + "px";
}
}
},
pageAdd()
{
this.pageTemAdd(this.pageNum,1);
},
pageSub()
{
this.pageTemAdd(this.pageNum,-1);
},
//页面相加 或者 相减
pageTemAdd(index, num) {
var t_num=this.pageNum;
if (index * 1 + num * 1 >= this.count * 1) {
t_num = this.count * 1; //最大页数
} else if (index * 1 + num * 1 <= 1) {
t_num = 1; //最小页数
} else {
t_num = this.pageNum * 1 + num * 1; //中间页数
}
//this.pageNum=t_num; //单向传值 改为changePageNum来传值
if(t_num!=this.pageNum)
{
this.changePageNum(t_num);
this.refreshData();
}
}
}
}
</script>
<style scoped>
img {
margin-left: 14px;
cursor: pointer;
}
input[type="text"] {
width: 24px;
text-align: center;
height: 20px;
border: 1px solid #FFFFFF;
background: 0 0;
color: #FFFFFF;
margin-left: 14px;
}
</style>
—the—end—