4 表格使用
表格是前端经常使用到的一个工具，尤其是在管理系统中，因为存在着数据的展示和操作（增删改查）。
我们将前文中提到的content.vue的内容进行了修改，来进行表格的相关展示。
表格基本展示
以前面的布局为基础添加表格时，发现表头很高很高，调整表格的样式也无济于事，后来才发现是之前我们的el-main的样式写的有问题，在Test.vue中找到line-height: 160px属性，注释掉即可。
.el-main {
background-color: #e9eef3;
color: #333;
text-align: center;
/* line-height: 160px; */
}
复制官方表格示例代码，添加表格。
<template>
<div align="center">
<br>
<br>
<el-table :data="tableData" stripe style="width: 80%">
<el-table-column prop="date" label="日期" width="auto" align="center"></el-table-column>
<el-table-column prop="name" label="姓名" width="auto" align="center"></el-table-column>
<el-table-column prop="address" label="地址" width="auto" align="center"></el-table-column>
</el-table>
</div>
</template>
<script>
export default {
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 弄"
}
]
};
}
};
</script>
我在代码中作了一些修改，主要是调整了每一列内容的位置以及表格的总宽度，最后效果如下。
分页问题
分页问题很好理解，考虑到用户体验以及服务器的计算性能，一个页面显示的数据肯定是有限的，所以要分页显示。官方也给出了分页组件，让我们来看看。
将如下代码添加到el-table后即可。
<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>
先看看写死的数据的效果。
由于背景色的原因看起来有点别扭，不过我们先不关注样式，首先进行分页功能的探索。分页实际上分两种，一种是前端分页，一种是后端分页。前端分页指的是数据的处理在前端进行，后端分页自然就是在后端进行数据的处理。
前端分页
前端分页的应用场景，就是在你不知道后端究竟会返回多少数据的情况下需要做的处理，比如处理搜索功能返回的数据。
我们先不向后端进行请求，自己构造数据并进行处理，样本数据就是复制粘贴之前的内容。
currentPage:"1",
pageSize: "6",
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 弄"
},
{
date: "2016-05-04",
name: "王小虎",
address: "上海市普陀区金沙江路 1517 弄"
},
{
date: "2016-05-04",
name: "王小虎",
address: "上海市普陀区金沙江路 1517 弄"
},
{
date: "2016-05-04",
name: "王小虎",
address: "上海市普陀区金沙江路 1517 弄"
},
{
date: "2016-05-04",
name: "王小虎",
address: "上海市普陀区金沙江路 1517 弄"
},
{
date: "2016-05-04",
name: "王小虎",
address: "上海市普陀区金沙江路 1517 弄"
},
{
date: "2016-05-04",
name: "王小虎",
address: "上海市普陀区金沙江路 1517 弄"
}
]
然后我们关闭修改每页数据量的功能，也就是删除page-sizes这个属性，然后分别为page-size，current-page.sync属性绑定相应的值（关于el-table中这些属性的功能可参见官方的文档，这里就不再做详细描述了），当然这些值都需要在data进行定义，前边的代码已经给出了。
然后添加filter（和data同级），也就是我们分页功能的核心。
filters: {
pagination(array, pageNo, pageSize) {
let offset = (pageNo - 1) * pageSize;
let data =
offset + pageSize >= array.length
? array.slice(offset, array.length)
: array.slice(offset, offset + pageSize);
return data;
}
}
在el-table中启用该过滤器。
<el-table :data="tableData | pagination(currentPage,pageSize)" stripe style="width: 80%">
<el-table-column prop="date" label="日期" width="auto" align="center"></el-table-column>
<el-table-column prop="name" label="姓名" width="auto" align="center"></el-table-column>
<el-table-column prop="address" label="地址" width="auto" align="center"></el-table-column>
</el-table>
查看效果。
第一页：
可以看到一共显示了六条数据，因为我们设置的pageSize是6，你可以根据需求进行修改。
第二页：
显示了剩余的四条数据。
说明我们的分页功能实现了。
后端分页
由于后端分页需要向后端请求数据吗，我们先暂时搁置一下。
