vue进阶之vue-easytable实现前端的表格+分页

表格+分页

对于还在坑中的自己而言，勤奋的笔记不能停。还是在博客上多记录免得文件丢失到时不知哪里找。网上虽然有许多分页内容，但是对初学者而言有许多不必要的东西容易搞混阅读者。所以自己弄了一个简单纯净版的，没有过多的修饰内容。分页部分可以使用elementui中的，也可以直接用vue-easytable中的，两者一样的，没啥区别。

第一步：引入vue-easytable

（这个网上有许多的资料，可以自己去找）

 给个vue-easytable的链接：API&实例

1：npm下载vue-easytable

npm install vue-easytable --save-dev

2：在main.js中全局引入

import 'vue-easytable/libs/themes-base/index.css'
import {VTable,VPagination} from 'vue-easytable'

Vue.component(VTable.name,VTable)
Vue.component(VPagination.name,VPagination)

第二步：创建表格数据

因为这里没有连接后端，所以要分页肯定需要一大串数据，直接写data里有点长久分离出来了。下面给了部分数据（删除后的）

export default[
    {'id':'1','name':'小红','age':'12','height':'112','sex':'女','score':'100'},
    {'id':'2','name':'小丽','age':'12','height':'116','sex':'女','score':'99'},
    {'id':'3','name':'小芳','age':'12','height':'113','sex':'女','score':'98'},
    {'id':'4','name':'小华','age':'12','height':'130','sex':'男','score':'96'},
    {'id':'5','name':'小聪','age':'12','height':'120','sex':'男','score':'93'},
    {'id':'6','name':'小胖','age':'12','height':'118','sex':'男','score':'86'},
    {'id':'7','name':'小明','age':'12','height':'121','sex':'男','score':'59'},
    {'id':'8','name':'小飞','age':'12','height':'125','sex':'男','score':'92'},
    {'id':'9','name':'小环','age':'12','height':'120','sex':'女','score':'93'},
    {'id':'10','name':'小义','age':'12','height':'116','sex':'男','score':'79'},

    {'id':'11','name':'小白','age':'12','height':'116','sex':'男','score':'81'},
    {'id':'12','name':'小黑','age':'12','height':'118','sex':'男','score':'88'},
    {'id':'13','name':'小海','age':'12','height':'125','sex':'男','score':'83'},
    {'id':'14','name':'小金','age':'12','height':'129','sex':'男','score':'82'},
    {'id':'15','name':'小路','age':'12','height':'127','sex':'女','score':'72'},
    {'id':'16','name':'小龙','age':'12','height':'125','sex':'男','score':'96'},
    {'id':'17','name':'小蓝','age':'12','height':'118','sex':'女','score':'93'},
    {'id':'18','name':'小兰','age':'12','height':'124','sex':'女','score':'71'},
    {'id':'19','name':'小高','age':'12','height':'116','sex':'女','score':'79'},
    {'id':'20','name':'小国','age':'12','height':'130','sex':'男','score':'68'},
]

第三步：代码编写

创建一个tablePage.vue

<template>
    <div class="tablePage">
        <h1>表格+分页</h1>
        <!-- 表格-->
        <v-table 
            :columns="tableConfig.columns" 
            :table-data="tableConfig.tableData" 
            :paging-index="(pageIndex-1)*pageSize">
        </v-table>
        <!-- 分页-->
        <v-pagination 
            @page-change="pageChange" 
            @page-size-change="pageSizeChange" 
            :total="total" :page-size="pageSize" 
            :layout="['total', 'prev', 'pager', 'next', 'sizer', 'jumper']">
        </v-pagination>
    </div>
</template>

<script>
//引入数据
import tableDate from "../mock/tableData1.js";
export default {
    data() {
        return {
            pageIndex: 1,
            pageSize: 10,
            total:'',
            tableConfig: {
                tableData: [],
                columns: [
                    {
                        field: "id",
                        title: "编号",
                        width: 50,
                        columnAlign: "center"
                    },
                    {
                        field: "name",
                        title: "姓名",
                        width: 120,
                        columnAlign: "center"
                    },
                    {
                        field: "age",
                        title: "年龄",
                        width: 50,
                        columnAlign: "center",
                    },

                    {
                        field: "height",
                        title: "身高",
                        width: 100,
                        columnAlign: "left",
                    },
                    {
                        field: "sex",
                        title: "性别",
                        width: 50,
                        columnAlign: "center",
                    },
                    {
                        field: "score",
                        title: "成绩",
                        width: 80,
                        columnAlign: "center",
                    }
                ]
            }
        };
    },
    created() {
        this.getTableData();
    },
    methods: {
        getTableData() {
            this.tableConfig.tableData = tableDate.slice(
                (this.pageIndex - 1) * this.pageSize,
                this.pageIndex * this.pageSize
            );
            this.total = tableDate.length;
        },
        pageChange(pageIndex) {
            this.pageIndex = pageIndex;
            this.getTableData();
            console.log(pageIndex);
        },
        pageSizeChange(pageSize) {
            this.pageIndex = 1;
            this.pageSize = pageSize;
            this.getTableData();
        }
    }
};
</script>

效果图展示