ElementUI实现表格分页功能

<!DOCTYPE html>
<html lang="en">

<head>
    <Meta charset="UTF-8">
    <Meta name="viewport" content="width=device-width, initial-scale=1.0">
    <Meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>表格数据分页</title>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>

<body>
    <div id="vue">
        <el-table :data="table_list.slice((currentPage-1)*pagesize,currentPage*pagesize)"
            :default-sort="{prop: 'date', order: 'descending'}" height="450" border style="width: 100%" stripe
            highlight-current-row>
            <el-table-column label="序号">
                <template slot-scope="scope">
                    {{scope.$index+1}}
                </template>
            </el-table-column>
            <el-table-column prop="date" label="工号">
            </el-table-column>
            <el-table-column prop="name" label="姓名">
            </el-table-column>
            <el-table-column prop="address" label="职位">
            </el-table-column>
            <el-table-column fixed="right" label="操作" width="100">
                <template slot-scope="scope">
                    <el-button type="text" size="small">移除
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"
            :page-sizes="[10, 20, 50, 100]" :page-size="pagesize" layout="total, sizes, prev, pager, next, jumper"
            :total="table_list.length">
        </el-pagination>

    </div>
</body>
<script src="http://cdn.suoluomei.com/common/js2.0/vue/v2.5.16/vue.js"></script>
<script src="https://cdn.suoluomei.com/common/js2.0/element-ui/2.12/lib/theme-chalk/index.js"></script>


<script>

    new Vue({
        el: '#vue',
        data: {
            table_list: [{
                date: '20160503',
                name: '王小虎',
                address: '销售'
            }, {
                date: '20160502',
                name: '王小虎',
                address: '销售'
            }, {
                date: '20160504',
                name: '王小虎',
                address: '销售'
            }, {
                date: '20160501',
                name: '王小虎',
                address: '销售'
            }, {
                date: '20160508',
                name: '王小虎',
                address: '销售'
            }, {
                date: '20160506',
                name: '王小虎',
                address: '销售'
            }, {
                date: '20160507',
                name: '王小虎',
                address: '销售'
            }],
            currentPage: 1,
            pagesize: 10,

        },
        methods: {
            handleSizeChange: function (size) {
                this.pagesize = size;
            },
            handleCurrentChange: function (currentPage) {
                this.currentPage = currentPage;
            }
        }
    })
</script>

</html>
@H_404_3@ 转自：https://cloud.tencent.com/developer/article/1691239
ElementUI实现表格分页功能

相关推荐
