1. 前言

如果是開發功能型的網站，例如各類資訊管理系統，那麼表格的使用頻率會相當之高。

實際上，我們的資料存儲到資料庫，不就是以表格的形式存在嗎？是以在界面上顯示、操作，使用表格來處理也是非常合理的。

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

2. 基本用法

針對如下資料：

tableData: [{
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀區金沙江路 1518 弄'
      }, {
        date: '2016-05-04',
        name: '王小虎',
        address: '上海市普陀區金沙江路 1517 弄'
      }, {
        date: '2016-05-01',
        name: '王小虎',
        address: '上海市普陀區金沙江路 1519 弄'
      }],
可以使用el-table将資料展示為表格，代碼如下：

    基本用法
    <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屬性用來綁定資料清單。

el-table-column表示表格的一列，prop屬性用于指定該列綁定資料清單的屬性名，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>

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

5. 自定義尺寸

通過将size設定為medium/small/mini，可以調整表格尺寸，例如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. 顯示索引

可以添加一列，并将列類型設定為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. 顯示内容過長時的提示

當某列資料内容超過列寬度時，可以通過為列添加

show-overflow-tooltip

屬性，展示提示資訊。

顯示内容過長時的提示
    <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 '';
    },

最終效果如下：

9. 固定表頭

如果表格行數較多，那麼往下滾動界面時，會看不到表格的标題，這無疑是體驗不佳的。el-table隻需要設定一個高度，就能固定表頭：

固定表頭
    <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. 固定列

當表格中列數過多時，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的實作非常簡單，直接在el-table-column内部嵌套el-table-column即可。

資料部分：

cityData: [{

date: '2016-05-03',

name: '王小虎',

province: '上海',

city: '普陀區',

address: '上海市普陀區金沙江路 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="市區" width="120">

<el-table-column prop="address" label="位址" width="300">

<el-table-column prop="zip" label="郵編">

</el-table>

12. 展開行

有時候如果資訊特别多，我們可以設計點選左側按鈕後，在目前行下方展示詳細資訊。

展開行

<el-table :data="tableData" border>

<el-table-column type="expand">

<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 label="位址">

<span>{{ props.row.address }}</span>

</el-form>

</template>

<el-table-column prop="date" label="日期" width="180">

<el-table-column prop="name" label="姓名">

注意，展開行的類型需要為expand，然後可以通過slot-scope指定的props來取出目前行的資料，按照我們想要的方式展現即可。如上代碼效果如下：

13. 自定義列模闆

我們可以完全自定義列裡面的顯示内容：

自定義列模闆

<el-table-column prop="name" label="姓名" width="180">

<el-table-column prop="address" label="位址">

<el-table-column fixed="right" label="操作" width="150">

<el-button @click="btnView(scope.row)" type="primary" size="small">檢視</el-button>

<el-button type="danger" size="small">編輯</el-button>

如上代碼中，我們通過在列中間添加如下内容，template中間的内容可以随意定制，而且可以通過scope.row拿到目前行的資料。

14. 單選

通過添加highlight-current-row屬性即可開啟單選功能，然後可以通過@current-change指定選中項發生變化時觸發的方法。

單選

<el-table :data="tableData" border highlight-current-row @current-change="handleCurrentChange">

handleCurrentChange(row) {

console.log(row);

15. 多選

可以通過添加type值為selection的列，來啟用多選功能，然後@selection-change可以指定選中項變化時觸發的方法。

多選(顯示複選框)

<el-table :data="tableData" ref="multipleTable" border @selection-change="handleSelectionChange">

<el-table-column type="selection" width="100">

<el-button @click="btnGetSelection()">擷取選中項</el-button>

</div>

JS代碼如下：

handleSelectionChange(selection) {

console.log(selection);

btnGetSelection() {

let selection = this.$refs.multipleTable.selection;

}

上述代碼中，通過this.$refs.multipleTable.selection可以擷取到目前所有選中項資訊，便于送出時使用。

16. 前端排序

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

前端排序

<el-table :data="tableData" border :default-sort="{prop: 'date', order: 'descending'}">

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

17. 小結

el-table的功能還是相當全面的，本篇按我自己的了解講解了一些經常會用到的用法，供大家參考。

Element el-table 表格詳解3. 顯示斑馬紋4. 顯示邊框5. 自定義尺寸6. 顯示索引7. 顯示内容過長時的提示8. 自定義行樣式9. 固定表頭10. 固定列

3. 顯示斑馬紋

4. 顯示邊框

5. 自定義尺寸

6. 顯示索引

7. 顯示内容過長時的提示

8. 自定義行樣式

9. 固定表頭

10. 固定列

繼續閱讀

MySQL的4種隔離級别？出現問題

tab滑鼠經過菜單切換

XX系統實施過程問題總結

vue （vue2.0）使用總結(從大體結構總結)

無元件上傳圖檔到資料庫中，最完整解決方案

vue搭建過程及出現問題

【MySQL資料庫】資料庫索引事務1.索引2.事務

/\B(?=(?:\d{3})+$)/g 一條令人費解的正規表達式

neo4j之cypher使用文檔

适用于JavaScript的ECMAScript 2020規範向前發展

NOSQL安全攻擊

mybatis_入門程式Mybatis入門

JS生成uuid的四種方法

登入plsql 報錯 the account is locked --使用者被鎖

SequoiaDB巨杉資料庫C++驅動概述

layui多任務上傳添加進度條