<template>
? <div>
? ? <h3>學(xué)習(xí)文件</h3>
? ? <div class="videoMain" v-if="dataSourceList.length">
? ? ? <div class="videoBox" v-for="item in dataSourceList" :key="item.index">
? ? ? ? <a-tooltip placement="top">
? ? ? ? ? <template slot="title">
? ? ? ? ? ? {{item.name}}
? ? ? ? ? </template>
? ? ? ? ? <a class="ellipsis" :href="item.VUrl" rel="external nofollow" >{{item.name}}</a>
? ? ? ? </a-tooltip>
? ? ? </div>
? ? </div>
? ? <!-- 分頁 -->
? ? <div style="margin-top: 20px;" v-if="dataSourceList.length">
? ? ?<a-pagination size="small"?
? ? ? ? :total="ipagination.total"?
? ? ? ? v-model="ipagination.current"
? ? ? ? show-size-changer?
? ? ? ? show-quick-jumper?
? ? ? ? :page-size-options="ipagination.pageSizeOptions"
? ? ? ? :page-size="ipagination.pageSize"
? ? ? ? @change="pageChange"
? ? ? ? @showSizeChange="onShowSizeChange"
? ? ? ? :show-total="ipagination.showTotal" />
? ? </div>
? ? <div class="nullError" v-else>
? ? ? <p>暫無文件</p>
? ? </div>
? </div>
</template>

data：

data() {
? ? ? return {
? ? ? ? description: '文件列表組件',
? ? ? ? dataSource:[], //獲取的數(shù)據(jù)
? ? ? ? dataSourceList:[],//分頁后的數(shù)據(jù)
? ? ? ? /* 分頁參數(shù) */
? ? ? ? ipagination:{
? ? ? ? ? current: 1,//當(dāng)前頁數(shù)
? ? ? ? ? pageSize: 6,
? ? ? ? ? pageSizeOptions: ['6', '10','20','30', '50'],
? ? ? ? ? showTotal: (total, range) => {
? ? ? ? ? ? return range[0] + "-" + range[1] + " 共" + total + "條"
? ? ? ? ? },
? ? ? ? ? showQuickJumper: true,
? ? ? ? ? showSizeChanger: true,
? ? ? ? ? total: 0
? ? ? ? },
? ? ? };
? ? },

獲取數(shù)據(jù)：

created() {
?? ?this.loadData(); ///獲取數(shù)據(jù)的方法
},

methods：

loadData(){
? ? ? ? getAction(this.URL).then((res)=>{
? ? ? ? ? if(res.success){
? ? ? ? ? ? this.dataSource = res.result.records;
? ? ? ? ? }else{
? ? ? ? ? ? this.$message.error(res.message)
? ? ? ? ? }
? ? ? ? }).finally(()=>{
? ? ? ? //獲取數(shù)據(jù)后調(diào)用一次分頁方法
? ? ? ? ? this.changeData(param.current,param.pageSize);//獲取數(shù)據(jù)后調(diào)用一次分頁方法
? ? ? ? })
? ? ? },
? ? ? // 頁碼改變的回調(diào)，參數(shù)是改變后的頁碼及每頁條數(shù)
? ? ? pageChange(page,pageSize){
? ? ? ? this.changeData(page,pageSize);
? ? ? },
? ? ? // 下拉選項(xiàng)改變， 參數(shù)是改變后的頁碼及每頁條數(shù)
? ? ? onShowSizeChange(current, pageSize) {
? ? ? ? this.ipagination.pageSize = pageSize;
? ? ? ? this.changeData(current,pageSize);
? ? ? },
? ? ? // 分頁改變時(shí),獲取對(duì)應(yīng)的數(shù)據(jù)，動(dòng)態(tài)改變數(shù)據(jù)
? ? ? changeData(page,pageSize){
? ? ? ? var p = (page - 1)*pageSize;
? ? ? ? var pSize = page*pageSize;
? ? ? ? var dataSourceList = [];
? ? ? ? this.dataSource.forEach((item,index)=>{
? ? ? ? ? if(p<= index && index< pSize){
? ? ? ? ? ? dataSourceList.push(item)
? ? ? ? ? }
? ? ? ? })
? ? ? ? this.dataSourceList = dataSourceList;
? ? ? }

主要是后面幾個(gè)方法，changeData是改變的具體方法。

方式二

用computed 屬性計(jì)算

? computed: {
? ? TableData() {
? ? ? return this.teacherList.slice(
? ? ? ? (this.pagination.page - 1) * this.pagination.limit,
? ? ? ? this.pagination.page * this.pagination.limit
? ? ? );
? ? },
? },