Element el-table 表格使用詳解

更新時間：2024年03月26日 14:58:16 作者：程序員大陽

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

1. 前言

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

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

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

2. 基本用法

針對如下數(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屬性用來綁定數(shù)據(jù)列表。

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

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

上述代碼效果如下：

3. 顯示斑馬紋

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

 	顯示斑馬紋
    <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. 顯示邊框

邊框就不用說了，基本所有表格，帶上邊框會效果更好一些。添加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>

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

5. 自定義尺寸

通過將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，即可自動顯示索引：

 	顯示索引
    <el-table :data="tableData" border>
      <el-table-column label="序號" 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)容過長時的提示

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

  	顯示內(nèi)容過長時的提示
    <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. 自定義行樣式

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

自定義行樣式
    <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 '';
    },

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

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

最終效果如下：

9. 固定表頭

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

固定表頭
    <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ù)過多時，el-table會展示橫向滾動條，但是有時候我們希望一些列，如操作按鈕所在的列，能夠固定住，此時可以使用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. 多級表頭

實際上多級表頭el-table的實現(xià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
      }]

表格組件：

多級表頭
    <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. 展開行

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

展開行
    <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>

注意，展開行的類型需要為expand，然后可以通過slot-scope指定的props來取出當(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>

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

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

效果如下：

14. 單選

通過添加highlight-current-row屬性即可開啟單選功能，然后可以通過@current-change指定選中項發(fā)生變化時觸發(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. 多選

可以通過添加type值為selection的列，來啟用多選功能，然后@selection-change可以指定選中項變化時觸發(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()">獲取選中項</el-button>
    </div>

JS代碼如下：

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

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

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>

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