element-ui 实现表格分页

需要用到element组件:table表格和Pagination 分页

官网地址：Element - The world's most popular Vue UI framework

1.首先：安装element-ui

npm i element-ui -S //终端运行

2.引用element-ui

引用分为按需引用和全部引用(建议按需引用)

2.1全部引用

//全部引用 main.js里添加代码

import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import App from './App.vue';

Vue.use(ElementUI);

new Vue({
  el: '#app',
  render: h => h(App)
});

2.2按需引用

借助 babel-plugin-component，我们可以只引入需要的组件，以达到减小项目体积的目的。

安装 babel-plugin-component

npm install babel-plugin-component -D

//修改  .babelrc 文件

{
  "presets": [["es2015", { "modules": false }]],
  "plugins": [
    [
      "component",
      {
        "libraryName": "element-ui",
        "styleLibraryName": "theme-chalk"
      }
    ]
  ]
}

//示例 引用button和select

import Vue from 'vue';
import { Button, Select } from 'element-ui';
import App from './App.vue';

Vue.component(Button.name, Button);
Vue.component(Select.name, Select);
/* 或写为
 * Vue.use(Button)
 * Vue.use(Select)
 */

new Vue({
  el: '#app',
  render: h => h(App)
});

3.前端表格代码

<template>
    <div class="home">
        <el-table :data="tableData" stripe style="width: 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>
    </div>
</template>

<script>

export default {
    name: '',
    data() {
        return {
            tableData: [
                {
                    date: '2016-05-02',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1518 弄'
                },
                {
                    date: '2016-05-04',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1517 弄'
                },
                {
                    date: '2016-05-01',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1519 弄'
                },
                {
                    date: '2016-05-03',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1516 弄'
                }
            ]
        }
    },
    components: {}
}
</script>

运行后

4.接下来分页

添加以下代码

<el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage4"
      :page-sizes="[100, 200, 300, 400]"
      :page-size="100"
      layout="total, sizes, prev, pager, next, jumper"
      :total="400">
</el-pagination>

:current-page的值表示当前是第几页；
:page-sizes的值表示可以选择一页多少条；
:page-size的值表示当前一页显示几条；
layout的值表示分页需要显示的内容，例如“total” 表示总数、“next” 表示下一页等；
:total的值表示总共有多少条数据；

关于方法

 methods: {
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
      },
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
      }
    },

样式什么的  自己可以根据自己审美进行调整 调整不过来就在前边加/deep/ 深度修改或者加 "::deep"