Element el-table 表格详解

喜欢ヅ旅行 2022-08-28 04:40 1423阅读 0赞

***[点此查看全部文字教程、视频教程、源代码][Link 1]***

### 本文目录 ###

*  1. 前言
 *  2. 基本用法
 *  3. 显示斑马纹
 *  4. 显示边框
 *  5. 自定义尺寸
 *  6. 显示索引
 *  7. 显示内容过长时的提示
 *  8. 自定义行样式
 *  9. 固定表头
 *  10. 固定列
 *  11. 多级表头
 *  12. 展开行
 *  13. 自定义列模板
 *  14. 单选
 *  15. 多选
 *  16. 前端排序
 *  17. 小结

# 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用于指定列宽度。

注意，一般最后一列的宽度我们不指定，这样的话可以自动占满剩余空间。

上述代码效果如下：  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA54aK54yr5aSn5ZOl5aSn_size_20_color_FFFFFF_t_70_g_se_x_16]

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

效果如下：  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA54aK54yr5aSn5ZOl5aSn_size_20_color_FFFFFF_t_70_g_se_x_16 1]

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

效果如下，注意最外围的灰色框线，是我截图时候添加的，不是网页实际效果。  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA54aK54yr5aSn5ZOl5aSn_size_20_color_FFFFFF_t_70_g_se_x_16 2]

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

效果如下，很明显更加紧凑了。  
![在这里插入图片描述][7d12c8aeaf7244b1b7539f60aaaefcdd.png]

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

效果：  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA54aK54yr5aSn5ZOl5aSn_size_20_color_FFFFFF_t_70_g_se_x_16 3]

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

效果如下：  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA54aK54yr5aSn5ZOl5aSn_size_20_color_FFFFFF_t_70_g_se_x_16 4]

# 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类，我们编写类样式代码如下：

最终效果如下：  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA54aK54yr5aSn5ZOl5aSn_size_20_color_FFFFFF_t_70_g_se_x_16 5]

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

效果如下：  
![在这里插入图片描述][fcde31fc87964f31b123686af203ec69.png]

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

效果如下：  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA54aK54yr5aSn5ZOl5aSn_size_20_color_FFFFFF_t_70_g_se_x_16 6]

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

效果如下：  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA54aK54yr5aSn5ZOl5aSn_size_20_color_FFFFFF_t_70_g_se_x_16 7]

# 12. 展开行 #

有时候如果信息特别多，我们可以设计点击左侧按钮后，在当前行下方展示详细信息。

展开行
        <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来取出当前行的数据，按照我们想要的方式展现即可。如上代码效果如下：  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA54aK54yr5aSn5ZOl5aSn_size_20_color_FFFFFF_t_70_g_se_x_16 8]

# 13. 自定义列模板 #

我们可以完全自定义列里面的显示内容：

自定义列模板
        <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>

如上代码中，我们通过在列中间添加如下内容，template中间的内容可以随意定制，而且可以通过scope.row拿到当前行的数据。

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

效果如下：  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA54aK54yr5aSn5ZOl5aSn_size_20_color_FFFFFF_t_70_g_se_x_16 9]

# 14. 单选 #

通过添加`highlight-current-row`属性即可开启单选功能，然后可以通过`@current-change`指定选中项发生变化时触发的方法。

单选
        <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);
        },

效果如下：  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA54aK54yr5aSn5ZOl5aSn_size_20_color_FFFFFF_t_70_g_se_x_16 10]

# 15. 多选 #

可以通过添加type值为`selection`的列，来启用多选功能，然后`@selection-change`可以指定选中项变化时触发的方法。

多选(显示复选框)
        <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`可以获取到当前所有选中项信息，便于提交时使用。

# 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列排序，且是降序。所以效果如下：  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA54aK54yr5aSn5ZOl5aSn_size_20_color_FFFFFF_t_70_g_se_x_16 11]

# 17. 小结 #

el-table的功能还是相当全面的，本篇按我自己的理解讲解了一些经常会用到的用法，供大家参考。

[Link 1]: https://studyingpanda.blog.csdn.net/article/details/105329926
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA54aK54yr5aSn5ZOl5aSn_size_20_color_FFFFFF_t_70_g_se_x_16]: /images/20220828/82c62e0ae06444d2b112b9a16573ac2b.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA54aK54yr5aSn5ZOl5aSn_size_20_color_FFFFFF_t_70_g_se_x_16 1]: /images/20220828/6437f30cd37347fcbfd5383f16de5614.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA54aK54yr5aSn5ZOl5aSn_size_20_color_FFFFFF_t_70_g_se_x_16 2]: /images/20220828/be9bf29707d14592beabbc8382633137.png
[7d12c8aeaf7244b1b7539f60aaaefcdd.png]: /images/20220828/4ccd882272ca4ac497a7850eb0526f59.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA54aK54yr5aSn5ZOl5aSn_size_20_color_FFFFFF_t_70_g_se_x_16 3]: /images/20220828/5a94b6c4f12143fe8ce1fd483d2d46f0.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA54aK54yr5aSn5ZOl5aSn_size_20_color_FFFFFF_t_70_g_se_x_16 4]: /images/20220828/04bc4ae451734981b00bfdefc36b684a.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA54aK54yr5aSn5ZOl5aSn_size_20_color_FFFFFF_t_70_g_se_x_16 5]: /images/20220828/f6c204b04c8b41ccb36aa4730f480a69.png
[fcde31fc87964f31b123686af203ec69.png]: /images/20220828/6c505d2ec78f4da4bb0c48f56cd54e5d.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA54aK54yr5aSn5ZOl5aSn_size_20_color_FFFFFF_t_70_g_se_x_16 6]: /images/20220828/5d47825d375a40bd930ba5982aef30cb.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA54aK54yr5aSn5ZOl5aSn_size_20_color_FFFFFF_t_70_g_se_x_16 7]: /images/20220828/45d609a7cae64f95809bdd8cd3303dd9.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA54aK54yr5aSn5ZOl5aSn_size_20_color_FFFFFF_t_70_g_se_x_16 8]: /images/20220828/26cc9c683e8a4714bad19c0bc4c0fd53.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA54aK54yr5aSn5ZOl5aSn_size_20_color_FFFFFF_t_70_g_se_x_16 9]: /images/20220828/6a4dda33c7844f95bfb8c3c69f4d82e0.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA54aK54yr5aSn5ZOl5aSn_size_20_color_FFFFFF_t_70_g_se_x_16 10]: /images/20220828/8d970d10ac884895a9de0af8a719eef7.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA54aK54yr5aSn5ZOl5aSn_size_20_color_FFFFFF_t_70_g_se_x_16 11]: /images/20220828/0ca430ac86494951a319c12fc76f17d6.png