Vue脚手架+Element UI开发——快速实现表格数据分页（带实例和细节分析）
项目背景：
最近在写一个后台管理系统项目的demo，需要用到element 组件的表格和分页，所以干脆写篇文章，彻底把分页这个功能搞熟，搞透，以后需要用到表格数据分页的效果，直接在这里Ctrl +C/V就行了，OK，直接来吧。
学习目标：
- 熟练饿了么的el-table和el-pagination组件，并配合使用实现分页。
- 熟练调整饿了么组件的样式，和尽量避免一些常见的坑。
学习内容——表格分页：
【步骤】
.首先必须满足前置步骤：npm i element-ui –S【这是全局的引入】
在 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);
或者：npm install babel-plugin-component -D【这是局部引入，这里只是提一下，更多细节请移步别人家的博客】
好了，前置步骤完了，就可以做最开心的事情了，那就是粘贴复制，
首先是HTML的表格部分：
<el-table
border 加个边框
:header-cell-style="{
'background-color': '#fafafa' }"
百度的，项目的表头是这个颜色，所以就难得加行内样式去覆盖了
:data="tableData.slice((currentPage - 1) * pagesize, currentPage * pagesize)"
这一步是最最重要的，实现绑定的表格数据和下面的分页变量相关联，一般都这样写，固定写法吧
style="width: 100%; min-height: 345px"
:default-sort="{ prop: 'zb_date', order: 'descending' }"
配置了一个表格的排序，就按照时间那一列排
>
下面就是每一列的表头，共有7列 后两列是操作按钮之类的
<el-table-column prop="zb_name" label="指标名称">
<template slot-scope="scope"> 通过这个模板 在里面可以干很多事情，可以自定义内容 加个小图标、甚至引入一个组件
<span style="margin-left: 10px">{
{ scope.row.zb_name }}span>
<i class="el-icon-question" @click="handleMeaning">i>
template>
el-table-column>
<el-table-column prop="zb_date" label="指标添加时间" sortable>
el-table-column>
<el-table-column prop="fw_level" label="服务等级" sortable>
el-table-column>
<el-table-column prop="bz_level" label="保障等级" sortable>
el-table-column>
<el-table-column prop="cp_type" label="产品类别">
el-table-column>
<el-table-column prop="pz_switch" label="配置开关">
<template slot-scope="scope">
在这里面是引入了一个封装好了的组件
<Myswitch
v-model="value"
text="开|关"
@click="handleClick1(scope.col)"
>Myswitch>
template>
el-table-column>
<el-table-column fixed="right" label="操作">
<template slot-scope="scope">
<el-button
@click="handleClick(scope.row)" 这里本来想引入一个模态框，但是被饿了么坑惨了，那个模态框 el-dialog 千万不能写在这里
type="text"
size="small"
>编辑el-button
>
这里千万不能写 模态框 el-dialog 不然当你点击 任意一个编辑按钮时，它都会把每个编辑的模态框放出来，然后模态框就会叠加，真的坑啊
template>
el-table-column>
el-table>
然后是HTML的分页部分【一般都写在el-table的下边，大多数项目都是这样的布局】
<el-pagination
@size-change="handleSizeChange" 该组件自带的分页规则事件 用函数来实现当前页面装5、10条等数据
@current-change="handleCurrentChange" 该组件自带的分页点击跳转事件 用函数来实现当前页面到点击后的页面
:current-page="currentPage" 绑定一个变量 实现 分页默认选中页数
:page-sizes="[5, 10, 20, 40, 100]" 数组用来装 分页的规则
:page-size="pagesize" 绑定一个变量 每页装好多条数据 它的值一定要是数组里面的元素
layout="total, sizes, prev, pager, next, jumper" 该组件的布局配置 这个配置比较完整
:total="tableData.length" 数据的统计 通常就是表格数据数组的长度
>
el-pagination>
好了，页面的部分就是这些。
然后是JS部分：
data() {
return {
pagesize: 5, 每页的数据
currentPage: 1, 分页默认选中页数
表格数据
tableData: [
{
zb_name: "专线业务可实施满足率",
zb_date: "2020-05-02",
fw_level: "金牌",
bz_level: "AAA",
cp_type: "政企专网专线;互联网专线",
},
{
zb_name: "专线业务停/复机时长",
zb_date: "2019-05-09",
fw_level: "银牌",
bz_level: "AAA",
cp_type: "政企专网专线",
},
{
zb_name: "开通交付用后即评",
zb_date: "2018-05-08",
fw_level: "铜牌",
bz_level: "AAA",
cp_type: "MPLS-VPN专线",
},
{
zb_name: "专线资源勘察反馈时长",
zb_date: "2017-05-08",
fw_level: "普通",
bz_level: "AAA",
cp_type: "暂无配置",
},
{
zb_name: "专线业务开通及时率",
zb_date: "2016-05-08",
fw_level: "金牌",
bz_level: "AAA",
cp_type: "政企专网专线",
},
{
zb_name: "专线业务开通及时率",
zb_date: "2015-05-08",
fw_level: "金牌",
bz_level: "AAA",
cp_type: "政企专网专线",
},
],
};
}
接下来是methods里面的函数：
分页部分的函数
handleSizeChange: function (size) {
this.pagesize = size;
console.log("分页规则为" + this.pagesize); //分页规则
},
handleCurrentChange: function (currentPage) {
this.currentPage = currentPage;
console.log("点击第" + this.currentPage + "页"); //点击第几页
},
OK，功能基本已经实现了，只是一些样式就自己调整一下就行了
方法也很简单，直接打开控制台，找到要改变的样式，直接把它自动加好的类名找到，然后进行覆盖即可
总结：
- 表格的使用在实际开发中特别的常见，大多时候其实都需要自己写样式之类的，还有就是饿了么的表格合并单元格特别麻烦，非常坑
- 所以最好以后自己写项目的时候还是要把原生的table标签搞熟悉
- 最后就是少用饿了么UI库，不然以后技术得不到啥提升，我师父说的