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
    }
  }
};