一次简单的Vue项目

4 表格使用

表格是前端经常使用到的一个工具，尤其是在管理系统中，因为存在着数据的展示和操作（增删改查）。

我们将前文中提到的content.vue的内容进行了修改，来进行表格的相关展示。

表格基本展示

以前面的布局为基础添加表格时，发现表头很高很高，调整表格的样式也无济于事，后来才发现是之前我们的el-main的样式写的有问题，在Test.vue中找到line-height: 160px属性，注释掉即可。

.el-main {
  background-color: #e9eef3;
  color: #333;
  text-align: center;
  /* line-height: 160px; */
}

复制官方表格示例代码，添加表格。

我在代码中作了一些修改，主要是调整了每一列内容的位置以及表格的总宽度，最后效果如下。

image

分页问题

分页问题很好理解，考虑到用户体验以及服务器的计算性能，一个页面显示的数据肯定是有限的，所以要分页显示。官方也给出了分页组件，让我们来看看。

将如下代码添加到el-table后即可。

先看看写死的数据的效果。

image

由于背景色的原因看起来有点别扭，不过我们先不关注样式，首先进行分页功能的探索。分页实际上分两种，一种是前端分页，一种是后端分页。前端分页指的是数据的处理在前端进行，后端分页自然就是在后端进行数据的处理。

前端分页

前端分页的应用场景，就是在你不知道后端究竟会返回多少数据的情况下需要做的处理，比如处理搜索功能返回的数据。

我们先不向后端进行请求，自己构造数据并进行处理，样本数据就是复制粘贴之前的内容。

 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中启用该过滤器。

查看效果。

第一页：

image

可以看到一共显示了六条数据，因为我们设置的pageSize是6，你可以根据需求进行修改。

第二页：

image

显示了剩余的四条数据。

说明我们的分页功能实现了。

后端分页

由于后端分页需要向后端请求数据吗，我们先暂时搁置一下。