一次简单的Vue项目

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>

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

image

分页问题

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

将如下代码添加到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>

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

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

    <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>

查看效果。

第一页:

image

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

第二页:

image

显示了剩余的四条数据。

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

后端分页

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