Element el-table 表格使用詳解

更新時(shí)間：2024年03月26日 14:58:16 作者：程序員大陽(yáng)

我們的數(shù)據(jù)存儲(chǔ)到數(shù)據(jù)庫(kù),不就是以表格的形式存在嗎,所以在界面上顯示、操作,使用表格來(lái)處理也是非常合理的,這篇文章給大家介紹Element el-table 表格使用方法,感興趣的朋友一起看看吧

1. 前言
2. 基本用法
3. 顯示斑馬紋
4. 顯示邊框
5. 自定義尺寸
6. 顯示索引
7. 顯示內(nèi)容過(guò)長(zhǎng)時(shí)的提示
8. 自定義行樣式
9. 固定表頭
10. 固定列
11. 多級(jí)表頭
12. 展開(kāi)行
13. 自定義列模板
14. 單選
15. 多選
16. 前端排序
17. 小結(jié)

1. 前言

如果是開(kāi)發(fā)功能型的網(wǎng)站，例如各類信息管理系統(tǒng)，那么表格的使用頻率會(huì)相當(dāng)之高。

實(shí)際上，我們的數(shù)據(jù)存儲(chǔ)到數(shù)據(jù)庫(kù)，不就是以表格的形式存在嗎？所以在界面上顯示、操作，使用表格來(lái)處理也是非常合理的。

本篇就來(lái)介紹下el-table表格組件的使用方法。

2. 基本用法

針對(duì)如下數(shù)據(jù)：

 	  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 弄'
      }],

可以使用el-table將數(shù)據(jù)展示為表格，代碼如下：

基本用法
    <el-table :data="tableData">
      <el-table-column prop="date" label="日期" width="180">
      </el-table-column>
      <el-table-column prop="name" label="姓名" width="180">
      </el-table-column>
      <el-table-column prop="address" label="地址">
      </el-table-column>
    </el-table>

解釋下，el-table表示表格組件，data屬性用來(lái)綁定數(shù)據(jù)列表。

el-table-column表示表格的一列，prop屬性用于指定該列綁定數(shù)據(jù)列表的屬性名，label是列的顯示名稱，width用于指定列寬度。

注意，一般最后一列的寬度我們不指定，這樣的話可以自動(dòng)占滿剩余空間。

上述代碼效果如下：

3. 顯示斑馬紋

為表格添加stripe屬性，即可開(kāi)啟斑馬紋，由于斑馬紋效果較好，所以一般都是開(kāi)啟的。

 	顯示斑馬紋
    <el-table :data="tableData" stripe>
      <el-table-column prop="date" label="日期" width="180">
      </el-table-column>
      <el-table-column prop="name" label="姓名" width="180">
      </el-table-column>
      <el-table-column prop="address" label="地址">
      </el-table-column>
    </el-table>

效果如下：

4. 顯示邊框

邊框就不用說(shuō)了，基本所有表格，帶上邊框會(huì)效果更好一些。添加border屬性即可顯示邊框：

帶邊框
    <el-table :data="tableData" border>
      <el-table-column prop="date" label="日期" width="180">
      </el-table-column>
      <el-table-column prop="name" label="姓名" width="180">
      </el-table-column>
      <el-table-column prop="address" label="地址">
      </el-table-column>
    </el-table>

效果如下，注意最外圍的灰色框線，是我截圖時(shí)候添加的，不是網(wǎng)頁(yè)實(shí)際效果。

5. 自定義尺寸

通過(guò)將size設(shè)置為medium/small/mini，可以調(diào)整表格尺寸，例如mini：

自定義尺寸--medium / small / mini
    <el-table :data="tableData" size="mini" border>
      <el-table-column prop="date" label="日期" width="180">
      </el-table-column>
      <el-table-column prop="name" label="姓名" width="180">
      </el-table-column>
      <el-table-column prop="address" label="地址">
      </el-table-column>
    </el-table>

效果如下，很明顯更加緊湊了。

6. 顯示索引

可以添加一列，并將列類型設(shè)置為type，即可自動(dòng)顯示索引：

 	顯示索引
    <el-table :data="tableData" border>
      <el-table-column label="序號(hào)" type="index" width="100">
      </el-table-column>
      <el-table-column prop="date" label="日期" width="300">
      </el-table-column>
      <el-table-column prop="name" label="姓名" width="300">
      </el-table-column>
      <el-table-column prop="address" label="地址" width="300">
      </el-table-column>
    </el-table>

效果：

7. 顯示內(nèi)容過(guò)長(zhǎng)時(shí)的提示

當(dāng)某列數(shù)據(jù)內(nèi)容超過(guò)列寬度時(shí)，可以通過(guò)為列添加show-overflow-tooltip屬性，展示提示信息。

  	顯示內(nèi)容過(guò)長(zhǎng)時(shí)的提示
    <el-table :data="tableData" border>
      <el-table-column prop="date" label="日期" width="100" show-overflow-tooltip>
      </el-table-column>
      <el-table-column prop="name" label="姓名" width="100" show-overflow-tooltip>
      </el-table-column>
      <el-table-column prop="address" label="地址" width="100" show-overflow-tooltip>
      </el-table-column>
    </el-table>

效果如下：

8. 自定義行樣式

如果自帶的樣式無(wú)法滿足需求，還可以自定義樣式：

自定義行樣式
    <el-table :data="tableData" border :row-class-name="tableRowClassName">
      <el-table-column prop="date" label="日期" width="180">
      </el-table-column>
      <el-table-column prop="name" label="姓名" width="180">
      </el-table-column>
      <el-table-column prop="address" label="地址">
      </el-table-column>
    </el-table>

如上代碼，行樣式由tableRowClassName方法決定，代碼如下：

tableRowClassName({ row, rowIndex }) {
      if (rowIndex === 0) {
        return 'warning-row';
      } else if (rowIndex === 1) {
        return 'success-row';
      }
      return '';
    },

這樣，第一行就會(huì)使用warning-row類，而第二行會(huì)采用success-row類，我們編寫(xiě)類樣式代碼如下：

<style>
.el-table .warning-row {
  background: wheat;
}
.el-table .success-row {
  background: #f0f9eb;
}
</style>

最終效果如下：

9. 固定表頭

如果表格行數(shù)較多，那么往下滾動(dòng)界面時(shí)，會(huì)看不到表格的標(biāo)題，這無(wú)疑是體驗(yàn)不佳的。el-table只需要設(shè)定一個(gè)高度，就能固定表頭：

固定表頭
    <el-table :data="tableData" border height="120">
      <el-table-column prop="date" label="日期" width="180">
      </el-table-column>
      <el-table-column prop="name" label="姓名" width="180">
      </el-table-column>
      <el-table-column prop="address" label="地址">
      </el-table-column>
    </el-table>

效果如下：

10. 固定列

當(dāng)表格中列數(shù)過(guò)多時(shí)，el-table會(huì)展示橫向滾動(dòng)條，但是有時(shí)候我們希望一些列，如操作按鈕所在的列，能夠固定住，此時(shí)可以使用fixed屬性：

固定列：
    <el-table :data="tableData" border>
      <el-table-column prop="date" label="日期" width="300">
      </el-table-column>
      <el-table-column prop="name" label="姓名" width="300">
      </el-table-column>
      <el-table-column prop="address" label="地址" width="300">
      </el-table-column>
      <el-table-column fixed="right" label="操作" width="100">
        <template slot-scope="scope">
          <el-button type="text" size="small">查看</el-button>
          <el-button type="text" size="small">編輯</el-button>
        </template>
      </el-table-column>
    </el-table>

效果如下：

11. 多級(jí)表頭

實(shí)際上多級(jí)表頭el-table的實(shí)現(xiàn)非常簡(jiǎn)單，直接在el-table-column內(nèi)部嵌套el-table-column即可。

數(shù)據(jù)部分：

 	  cityData: [{
        date: '2016-05-03',
        name: '王小虎',
        province: '上海',
        city: '普陀區(qū)',
        address: '上海市普陀區(qū)金沙江路 1518 弄',
        zip: 200333
      }]

表格組件：

多級(jí)表頭
    <el-table :data="cityData" border>
      <el-table-column prop="date" label="日期" width="150">
      </el-table-column>
      <el-table-column label="配送信息">
        <el-table-column prop="name" label="姓名" width="120">
        </el-table-column>
        <el-table-column label="地址">
          <el-table-column prop="province" label="省份" width="120">
          </el-table-column>
          <el-table-column prop="city" label="市區(qū)" width="120">
          </el-table-column>
          <el-table-column prop="address" label="地址" width="300">
          </el-table-column>
          <el-table-column prop="zip" label="郵編">
          </el-table-column>
        </el-table-column>
      </el-table-column>
    </el-table>

效果如下：

12. 展開(kāi)行

有時(shí)候如果信息特別多，我們可以設(shè)計(jì)點(diǎn)擊左側(cè)按鈕后，在當(dāng)前行下方展示詳細(xì)信息。

展開(kāi)行
    <el-table :data="tableData" border>
      <el-table-column type="expand">
        <template slot-scope="props">
          <el-form label-position="left">
            <el-form-item label="日期">
              <span>{{ props.row.date }}</span>
            </el-form-item>
            <el-form-item label="姓名">
              <span>{{ props.row.name }}</span>
            </el-form-item>
            <el-form-item label="地址">
              <span>{{ props.row.address }}</span>
            </el-form-item>
          </el-form>
        </template>
      </el-table-column>
      <el-table-column prop="date" label="日期" width="180">
      </el-table-column>
      <el-table-column prop="name" label="姓名">
      </el-table-column>
    </el-table>

注意，展開(kāi)行的類型需要為expand，然后可以通過(guò)slot-scope指定的props來(lái)取出當(dāng)前行的數(shù)據(jù)，按照我們想要的方式展現(xiàn)即可。如上代碼效果如下：

13. 自定義列模板

我們可以完全自定義列里面的顯示內(nèi)容：

 	自定義列模板
    <el-table :data="tableData" border>
      <el-table-column prop="date" label="日期" width="180">
        <template slot-scope="scope">
          {{scope.row.date.replaceAll('-','')}}
        </template>
      </el-table-column>
      <el-table-column prop="name" label="姓名" width="180">
      </el-table-column>
      <el-table-column prop="address" label="地址">
      </el-table-column>
      <el-table-column fixed="right" label="操作" width="150">
        <template slot-scope="scope">
          <el-button @click="btnView(scope.row)" type="primary" size="small">查看</el-button>
          <el-button type="danger" size="small">編輯</el-button>
        </template>
      </el-table-column>
    </el-table>

如上代碼中，我們通過(guò)在列中間添加如下內(nèi)容，template中間的內(nèi)容可以隨意定制，而且可以通過(guò)scope.row拿到當(dāng)前行的數(shù)據(jù)。

    	<template slot-scope="scope">
          {{scope.row.date.replaceAll('-','')}}
        </template>

效果如下：

14. 單選

通過(guò)添加highlight-current-row屬性即可開(kāi)啟單選功能，然后可以通過(guò)@current-change指定選中項(xiàng)發(fā)生變化時(shí)觸發(fā)的方法。

單選
    <el-table :data="tableData" border highlight-current-row @current-change="handleCurrentChange">
      <el-table-column prop="date" label="日期" width="180">
      </el-table-column>
      <el-table-column prop="name" label="姓名" width="180">
      </el-table-column>
      <el-table-column prop="address" label="地址">
      </el-table-column>
    </el-table>

 	handleCurrentChange(row) {
      console.log(row);
    },

效果如下：

15. 多選

可以通過(guò)添加type值為selection的列，來(lái)啟用多選功能，然后@selection-change可以指定選中項(xiàng)變化時(shí)觸發(fā)的方法。

多選(顯示復(fù)選框)
    <el-table :data="tableData" ref="multipleTable" border @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="100">
      </el-table-column>
      <el-table-column prop="date" label="日期" width="180">
      </el-table-column>
      <el-table-column prop="name" label="姓名" width="180">
      </el-table-column>
      <el-table-column prop="address" label="地址">
      </el-table-column>
    </el-table>
    <div style="margin-top: 20px">
      <el-button @click="btnGetSelection()">獲取選中項(xiàng)</el-button>
    </div>

JS代碼如下：

handleSelectionChange(selection) {
      console.log(selection);
    },
    btnGetSelection() {
      let selection = this.$refs.multipleTable.selection;
      console.log(selection);
    }

上述代碼中，通過(guò)this.$refs.multipleTable.selection可以獲取到當(dāng)前所有選中項(xiàng)信息，便于提交時(shí)使用。

16. 前端排序

el-table還支持前端排序，我們直接看演示代碼：

前端排序
    <el-table :data="tableData" border :default-sort="{prop: 'date', order: 'descending'}">
      <el-table-column prop="date" label="日期" width="180">
      </el-table-column>
      <el-table-column prop="name" label="姓名" width="180">
      </el-table-column>
      <el-table-column prop="address" label="地址">
      </el-table-column>
    </el-table>

通過(guò)default-sort，指定了按date列排序，且是降序。所以效果如下：