展示效果：展示出的視窗

第一步：在element-ui 提供的 el-table 表單 :data=“回撥的資料集.slice((當前頁-1)*每頁頁數，當前頁*每頁頁數)”

 1  <el-dialog class="my-info-dialog" title="部門收款詳細" :visible.sync="open" width="1000px" append-to-body>
 2           <el-table class="el-table-dx" v-loading="loading" height="500"
 3                     :data
 
="controllerList.slice((currentPage-1)*pageSize,currentPage*pageSize)" //重要程式碼
 4                     :row-style="rowStyle" :header-cell-style="cellStyle">
 5             <el-table-column label="部門" align="center" prop="deptName" />
 6             <el-table-column label="商務人員" align="center"
 
 prop="commissioner" />
 7             <el-table-column label="時間" align="center" prop="arrivalTime" width="180">
 8               <template slot-scope="scope">
 9                 <span>{{ parseTime(scope.row.arrivalTime, '{y}-{m}-{d}') }}</span>
10               </template>
 

11             </el-table-column>
12           </el-table>
13           <el-footer>
14             <!--分頁-->
15             <el-pagination class="el-pagination"
16                            @size-change="handleSizeChange"
17                            @current-change="handleCurrentChange"
18                            :current-page="currentPage"
19                            :page-sizes="[5, 10, 15, 20]"
20                            :page-size="pageSize"
21                            layout="total, sizes, prev, pager, next, jumper"
22                            :total="parseInt(total)">
23             </el-pagination>
24           </el-footer>
25           <div slot="footer" class="dialog-footer">
26             <el-button size="mini" round @click="open = false">取 消</el-button>
27           </div>
28         </el-dialog>

第二步：在vue 的 export default{data(){return{}}}

export default {
  name: 'warehouse-manage',
  data() {
    return {
      // 遮罩層
      loading: true,
      // 報統計表格資料
      controllerList: [],
      // 是否顯示彈出層
      open: false,
      //部門收款表格資料
      config: {},
      //當前頁
      currentPage: 1,
      //每頁顯示多少條
      pageSize: 5,
      // 總條數
      total: 0
    };
  },
  components: {},
  mounted() {
    this.getList();
    setInterval(this.getList,300000)
  },
  methods: {
    rowStyle({row}){
      if(row){
        return {
          background: '#0f1325'
        }
      }
    },
    cellStyle(){
      return{
        background: '#0f1325', color: '#375ada'
      }
    },
    getList(){
      sysCrmDeptCollectionCount().then(response => {
        this.config = {
          header: ["<span style=\"color:#375ada;\">各分部</span>",
                   "<span style=\"color:#375ada;\">收款（元）</span>"],
          data: response.data,
          rowNum: 6, //表格行數
          headerHeight: 35,
          headerBGC: "#100f25", //表頭
          oddRowBGC: "#0f1325", //奇數行
          evenRowBGC: "#171c33", //偶數行
          index: true,
          columnWidth: [50],
          align: ["center"],
          waitTime: 3000
        }
      })
    },
    //通過部門名稱檢視收款詳情
    getMethod(value){
      this.loading = true;
      let deptName = value.row[1];  //部門名稱
      getDeptNameController(deptName).then(response => {
        this.controllerList = response.data; //資料集
        this.total = this.controllerList.length; //獲取的中記錄數
        this.loading = false;
        this.currentPage = 1; //每次開啟彈窗回到初始頁
      });
      this.open = true;
    },
    handleSizeChange(newSize) {
      // pagesize改變觸發
      this.pageSize = newSize
    },
    handleCurrentChange(newPage) {
      // 頁碼改變觸發
      this.currentPage = newPage
    }
  }
};