zoukankan      html  css  js  c++  java
  • 前台数据进行分页

    <template>
    <div class="echarts">
    <el-table
    :data="dataList"
    style=" 100%">
    <el-table-column
    prop="date"
    label="日期"
    width="180">
    </el-table-column>
    <el-table-column
    prop="name"
    label="姓名"
    width="180">
    </el-table-column>
    <el-table-column
    prop="address"
    label="地址">
    </el-table-column>
    </el-table>
    <el-pagination
    @size-change="handleSizeChange"
    @current-change="handleCurrentChange"
    :current-page.sync="pagation.currentPage"
    :page-size="pagation.pagesize"
    layout="total, prev, pager, next"
    :total="pagation.total">
    </el-pagination>
    </div>
    </template>
    <script>
    export default {
    data: () => ({
    tableData: [],
    pagation: {
    pagesize:10,
    total:0,
    currentPage: 1
    },
    listArr: []
    }),
    created () {
    this.init()
    },
    computed:{
    dataList () {
    const dataCodeList = this.tableData
    const pagesize = this.pagation.pagesize
    const currentPage = this.pagation.currentPage
    return dataCodeList.slice((currentPage - 1)*pagesize,pagesize*currentPage)
    }
    },
    methods: {
    init () {
    let arr = []
    const num = 26
    for(var i= 0;i<num ; i++){
    var obj = {
    date: '2016-05-02',
    name: '王小虎' + num,
    address: '上海市普陀区金沙江路 1518 弄'
    }
    arr.push(obj)
    }
    this.pagation.total = num
    this.tableData = arr
    },
    handleSizeChange (size) {
    this.pagation.pagesize = size
    },
    handleCurrentChange (currentPage) {
    this.pagation.currentPage = currentPage
    }
    }
    };
    </script>
    <style scoped>
    .echarts{
    100%;
    height: 400px;
    margin: auto;
    text-align: center;
    }
    </style>
  • 相关阅读:
    生成客户端信任的证书文件
    postgresql Streaming Replication监控与注意事项
    采用pacemaker+corosync实现postgresql双机热备、高可用方案
    51nod1305(简单逻辑)
    51nod1091(贪心)
    51nod1009(1的数目)
    51nod1102(数塔)
    51nod1459(带权值的dijkstra)
    51nod1265(判断四个点是否共面)
    51node1264(判断线段相交)
  • 原文地址:https://www.cnblogs.com/cs122/p/9786959.html
Copyright © 2011-2022 走看看