Element el-table 表格使用详解

更新时间：2024年03月26日 14:58:16 作者：程序员大阳

我们的数据存储到数据库,不就是以表格的形式存在吗,所以在界面上显示、操作,使用表格来处理也是非常合理的,这篇文章给大家介绍Element el-table 表格使用方法,感兴趣的朋友一起看看吧

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 '';
    },

这样，第一行就会使用warning-row类，而第二行会采用success-row类，我们编写类样式代码如下：

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

最终效果如下：

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>
          <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. 展开行

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

展开行
    <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来取出当前行的数据，按照我们想要的方式展现即可。如上代码效果如下：

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>

效果如下：

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

效果如下：

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列排序，且是降序。所以效果如下：

17. 小结

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

到此这篇关于Element el-table 表格详解的文章就介绍到这了,更多相关Element el-table 表格内容请搜索程序员之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持程序员之家！

您可能感兴趣的文章:

Vite3迁移Webpack5的实现
本文主要介绍了Vite3迁移Webpack5的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2023-04-04
Vue中子组件不能修改父组件传来的Prop值的原因分析
在Vue中，父子组件之间通过Prop和Event实现了数据的双向绑定，但是，Vue设计者为什么不允许子组件修改父组件传递的Prop呢，本文就来带大家探究为什么子组件不能修改Prop,需要的朋友可以参考下
2023-06-06
vue-cli中的babel配置文件.babelrc实例详解
Babel是一个广泛使用的转码器，可以将ES6代码转为ES5代码，从而在现有环境执行。本文介绍vue-cli脚手架工具根目录的babelrc配置文件，感兴趣的朋友一起看看吧
2018-02-02
vue二选一tab栏切换新做法实现
这篇文章主要介绍了vue二选一tab栏切换新做法实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2021-01-01
vue实现echarts饼图/柱状图点击事件实例
echarts原生提供了相应的API,只需要在配置好echarts之后绑定相应的事件即可,下面这篇文章主要给大家介绍了关于vue实现echarts饼图/柱状图点击事件的相关资料,需要的朋友可以参考下
2023-06-06
Vue+express+Socket实现聊天功能
这篇文章主要为大家详细介绍了Vue+express+Socket实现聊天功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2021-06-06
在vue中使用jsx语法的使用方法
这篇文章主要介绍了在vue中使用jsx语法的使用方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-09-09
解决vue项目中出现Invalid Host header的问题
这篇文章主要介绍了解决vue项目中出现"Invalid Host header"的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2020-11-11
基于vue实现8小时带刻度的时间轴根据当前时间实时定位功能
这篇文章主要介绍了基于vue实现8小时带刻度的时间轴根据当前时间实时定位功能,开始时间、结束时间可配置，根据当前时间初始化位置，本文通过实例代码给大家介绍的非常详细，需要的朋友可以参考下
2023-05-05
Vue自定义弹窗指令的实现代码
使用vue2.0实现自定义弹窗指令，当标签有该指令时，点击标签可以弹出弹窗。下面通过实例代码给大家介绍Vue自定义弹窗指令的相关知识，感兴趣的朋友一起看看吧
2018-08-08