4 表格使用

表格是前端經(jīng)常使用到的一個工具，尤其是在管理系統(tǒng)中，因為存在著數(shù)據(jù)的展示和操作（增刪改查）。

我們將前文中提到的content.vue的內(nèi)容進(jìn)行了修改，來進(jìn)行表格的相關(guān)展示。

表格基本展示

以前面的布局為基礎(chǔ)添加表格時，發(fā)現(xiàn)表頭很高很高，調(diào)整表格的樣式也無濟于事，后來才發(fā)現(xiàn)是之前我們的el-main的樣式寫的有問題，在Test.vue中找到line-height: 160px屬性，注釋掉即可。

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

復(fù)制官方表格示例代碼，添加表格。

<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: "上海市普陀區(qū)金沙江路 1518 弄"
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          address: "上海市普陀區(qū)金沙江路 1517 弄"
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          address: "上海市普陀區(qū)金沙江路 1519 弄"
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀區(qū)金沙江路 1516 弄"
        }
      ]
    };
  }
};
</script>

我在代碼中作了一些修改，主要是調(diào)整了每一列內(nèi)容的位置以及表格的總寬度，最后效果如下。

image

分頁問題

分頁問題很好理解，考慮到用戶體驗以及服務(wù)器的計算性能，一個頁面顯示的數(shù)據(jù)肯定是有限的，所以要分頁顯示。官方也給出了分頁組件，讓我們來看看。

將如下代碼添加到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>

先看看寫死的數(shù)據(jù)的效果。

image

由于背景色的原因看起來有點別扭，不過我們先不關(guān)注樣式，首先進(jìn)行分頁功能的探索。分頁實際上分兩種，一種是前端分頁，一種是后端分頁。前端分頁指的是數(shù)據(jù)的處理在前端進(jìn)行，后端分頁自然就是在后端進(jìn)行數(shù)據(jù)的處理。

前端分頁

前端分頁的應(yīng)用場景，就是在你不知道后端究竟會返回多少數(shù)據(jù)的情況下需要做的處理，比如處理搜索功能返回的數(shù)據(jù)。

我們先不向后端進(jìn)行請求，自己構(gòu)造數(shù)據(jù)并進(jìn)行處理，樣本數(shù)據(jù)就是復(fù)制粘貼之前的內(nèi)容。

 currentPage:"1",
 pageSize: "6",
 tableData: [
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀區(qū)金沙江路 1518 弄"
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          address: "上海市普陀區(qū)金沙江路 1517 弄"
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          address: "上海市普陀區(qū)金沙江路 1519 弄"
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀區(qū)金沙江路 1516 弄"
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          address: "上海市普陀區(qū)金沙江路 1517 弄"
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          address: "上海市普陀區(qū)金沙江路 1517 弄"
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          address: "上海市普陀區(qū)金沙江路 1517 弄"
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          address: "上海市普陀區(qū)金沙江路 1517 弄"
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          address: "上海市普陀區(qū)金沙江路 1517 弄"
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          address: "上海市普陀區(qū)金沙江路 1517 弄"
        }
      ]

然后我們關(guān)閉修改每頁數(shù)據(jù)量的功能，也就是刪除page-sizes這個屬性，然后分別為page-size，current-page.sync屬性綁定相應(yīng)的值（關(guān)于el-table中這些屬性的功能可參見官方的文檔，這里就不再做詳細(xì)描述了），當(dāng)然這些值都需要在data進(jìn)行定義，前邊的代碼已經(jīng)給出了。

然后添加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

可以看到一共顯示了六條數(shù)據(jù)，因為我們設(shè)置的pageSize是6，你可以根據(jù)需求進(jìn)行修改。

第二頁：

image

顯示了剩余的四條數(shù)據(jù)。

說明我們的分頁功能實現(xiàn)了。

后端分頁

由于后端分頁需要向后端請求數(shù)據(jù)嗎，我們先暫時擱置一下。