Vue 彈窗展示表格實現分頁功能

展示效果：展示出的窗口

 

 

 

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

 <el-dialog class="my-info-dialog" title="部門收款詳細" :visible.sync="open" width="1000px" append-to-body>
          <el-table class="el-table-dx" v-loading="loading" height="500"
                    :data="controllerList.slice((currentPage-1)*pageSize,currentPage*pageSize)" //重要代碼
                    :row-style="rowStyle" :header-cell-style="cellStyle">
            <el-table-column label="部門" align="center" prop="deptName" />
            <el-table-column label="商務人員" align="center" prop="commissioner" />
            <el-table-column label="時間" align="center" prop="arrivalTime" width="180">
              <template slot-scope="scope">
                <span>{{ parseTime(scope.row.arrivalTime, '{y}-{m}-{d}') }}</span>
              </template>
            </el-table-column>
          </el-table>
          <el-footer>
            <!--分頁-->
            <el-pagination class="el-pagination"
                           @size-change="handleSizeChange"
                           @current-change="handleCurrentChange"
                           :current-page="currentPage"
                           :page-sizes="[5, 10, 15, 20]"
                           :page-size="pageSize"
                           layout="total, sizes, prev, pager, next, jumper"
                           :total="parseInt(total)">
            </el-pagination>
          </el-footer>
          <div slot="footer" class="dialog-footer">
            <el-button size="mini" round @click="open = false">取 消</el-button>
          </div>
        </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
    }
  }
};