vue实现前端分页

前端分页，是拿到全部数据后，处理每页数据显示

显示代码：

 

<el-table

ref="multipleTable"

:data="report_NPSDashboard_NPSTrendPage"

tooltip-effect="dark"

style="width: 100%"

>

<el-table-column

prop="Detractors%"

label="Detractors%">

</el-table-column>

<el-table-column

prop="Detractors%"

label="Detractors%">

</el-table-column>

<el-table-column

prop="Detractors%"

label="Detractors%">

</el-table-column>

<el-table-column

prop="Detractors%"

label="Detractors%">

</el-table-column>

</el-table>

<!-- 分页控件 layout中的jumper布局有问题，这里没用-->

<el-pagination

class="pageView"

v-if="paginationShow"

background

 

@current-change="current_change"

:current-page.sync="pageNo"

:page-size="pageSize"

layout="total, prev, pager, next"

:pager-count="11"

:total="totalCount"> </el-pagination>

JS代码

export default {

components:{vPie,vBar,vLine,vFunnel},

data(){

return{

formData: {

month: '',

Franchise:""

},

CleansingRule:false,

downCleansingRuleBtn:false,

DefinitionVal:"+",

conditionVal:"",

resultArr:[],

monthArr:[],

FranchiseList: [

{

value: '升级问卷',

label: 'Upgrade'

},

{

value: '降级问卷',

label: 'Downgrade'

}

],

report_NPSDashboard_NPSTrendPage:[],

pageNo: 1,//当前页码

totalPage: 0,//总页数

paginationShow: false,//是否显示分页

totalCount: 0,//总条数

currentPage:1,

pageSize:5,

 

}

},

created(){

console.log(this.$route.matched);

 

},

mounted(){

this.getDate()

 

},

methods:{

showCleansingRule(){

this.CleansingRule=!this.CleansingRule

if(this.CleansingRule==true){

this.downCleansingRuleBtn=true

this.DefinitionVal="-"

}else{

this.downCleansingRuleBtn=false

this.DefinitionVal="+"

}

},

onSubmit(){

this.getdata(this.formData.month)

this.conditionVal=this.formData.month+"_"+this.formData.Franchise

},

getDate(){

let data = {};

this.post('report_NPSDashboard_filter',data)

.then((res) =>{

 

this.monthArr=res

this.formData.month=res[0].yymm

this.formData.Franchise=this.FranchiseList[0].label

this.getdata(res[0].yymm);

this.conditionVal=res[0].yymm+this.formData.Franchise

})

},

getdata(val){

 

let data = {};

data.yymm = val;

data.surveyType= this.FranchiseList[0].value;

this.post('report_NPSDashboard_Score1',data)

.then((res) =>{

this.resultArr=res

if (res.report_NPSDashboard_NPSTrend != null)

{

let that = this;

that.totalPage = res.report_NPSDashboard_NPSTrend.length%5+1;//设置分页的总页数

that.totalCount = res.report_NPSDashboard_NPSTrend.length;//设置数据总条数

if (res.report_NPSDashboard_NPSTrend.length>6)

{//总页数大于1时显示分页

that.paginationShow = true; }

for(var i=0;i<this.pageSize;i++)

{

that.report_NPSDashboard_NPSTrendPage.push(res.report_NPSDashboard_NPSTrend[i]);

}

console.log(that.report_NPSDashboard_NPSTrendPage,'sssssssssssss');

}

 

})

 

},

/* //改变每页显示数量时调用

handleSizeChange(val) { this.$nextTick(() => this.getdata(), ) },

//点击下一页和点击页码时执行

handleCurrentChange(val) { this.getdata(); }, */

current_change:function(currentPage){

  console.log("当前页面页码是：" + currentPage);

    this.report_NPSDashboard_NPSTrendPage.splice(0,this.report_NPSDashboard_NPSTrendPage.length);

    //alert("当前页面应该显示的数据index是："); // 10(n-1) ~ 10n

    for(var i = this.pageSize*(currentPage - 1) + 1;

        i<= ((this.totalCount>this.pageSize*currentPage)?(this.pageSize*currentPage):(this.totalCount));

        i++){

    

        this.report_NPSDashboard_NPSTrendPage.push(this.resultArr.report_NPSDashboard_NPSTrend[i-1]);

}

console.log(this.report_NPSDashboard_NPSTrendPage);

}

},

 

 

}