点此查看全部文字教程、视频教程、源代码

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 表格详解相关推荐

1. JSP 中EL表达式用法详解

   EL 全名为Expression Language EL 语法很简单,它最大的特点就是使用上很方便.接下来介绍EL主要的语法结构: ${sessionScope.user.sex} 所有EL都是以${ ...

2. 【前端就业课 第一阶段】HTML5 零基础到实战（六）表格详解

   注意:手机(APP)打开,内容显示更佳,不会的私聊博主即可 想要拿代码或加入学习计划(** 博主会监督你并且教你写文章 **)的拉到最下面(PC端Web打开)加博主即可,目录也在最下面. 参加博主前端 ...

3. css中table标签详解(一)

   css中table标签详解(一) 什么是table标签,以及table标签的组成? 不叨叨,直接上代码 <table><tr><td></td>< ...

4. Oracle创建表语句(Create table)语法详解及示例

   Oracle创建表语句(Create table)语法详解及示例   创建表(Create table)语法详解 1. ORACLE常用的字段类型ORACLE常用的字段类型有 VARCHAR2 (si ...

5. Element UI Table表格样式调整

   调整Element UI Table表格的样式 最终效果: 单元格合并,样式调整 模拟后端返回数据 {teamName: '小组一',outsourceFlag: '是',adminName: '张三 ...

6. Spring EL表达式使用详解

   Spring EL表达式使用详解 什么是Spring EL表达式 注入字面值 注入操作系统(OS)的属性 注入properties配置文件中数据 Bean属性调用 Bean方法调用 T运算符 构造器 ...

7. Easypoi使用模板导出文档或excel表格详解

   Easypoi使用模板导出docx文档或excel表格详解 **doc或docx文档的模板导出** **Excel的模板导出** 话不多说先上依赖 <dependency><grou ...

8. element ui Table表格数据筛选功能实现

   先来看看实现效果 element ui Table表格数据筛选功能实现 查看Element官网 关于筛选的实例. 在列中设置filters filter-method属性即可开启该列的筛选,filte ...

9. Excel 绘制表格 详解！

   Excel 绘制表格 详解! 1.在桌面上点击Excel图标,打开工作表,纵向是1.2.3.4-的顺序号,横向是A.B.C.D-的顺序号. 2.数一下你拟打的表格的列数,比如是8列,则你将鼠标箭头移到 ...

10. MySQL建表(create table)命令详解

    MySQL建表(create table)命令详解 create table命令 强调:使用建表命令之前必须使用use命令选择表所在的数据库.create table命令的格式如下: create t ...

最新文章

1. 15个应该掌握的jupyter notebook技巧
2. 使用gulp和vsc构建高效的typescript开发环境
3. 【JavaScript脚本】——T1基本语法
4. flume linux 命令,flume启动命令 · Mr.Deng’s Blog
5. pandas 对某一行标准化_Python中的神器Pandas，但是有人说Pandas慢...
6. 因开源协议“大打出手”，AWS 宣布创建 Elasticsearch、Kibana 分支
7. windows下杀死关不掉的进程
8. 免费随机图片api接口
9. 行测备考丨易混词傻傻分不清？大神来拯救你！
10. 单片机需要数电模电基础吗？单片机要多少模电数电知识 ？
11. 北京大学肖臻老师《区块链技术与应用》公开课-ETH
12. 【LeetCode】第934题——最短的桥（难度：中等）
13. 《挚爱》简谱，网上没找到，自己写了个，非专业，敬请指教！
14. 不服就GAN：GAN网络生成 cifar10 的图片实例（keras 详细实现步骤），GAN 的训练的各种技巧总结，GAN的注意事项和大坑汇总
15. 华硕天选2键盘背光灯切换颜色
16. 根据账户名称筛选收支明细
17. 【时间从来不语，却回答了所有问题】读书摘记
18. html前端几种加密方式的整理
19. LINUX命令（1）-创建文件
20. 分布式存储 HDFS原理

热门文章

1. 人生应该好好奋斗，奋斗吧！
2. 关键选择：等公司加薪or跳槽涨薪？
3. 2019暨南大学计算机考研群,【汇总】2019暨南大学各分院考研群，推荐加入
4. Data Visualization（数据可视化）
5. 煤矿井下定位系统黑科技—UWB
6. s4800扫描电镜的CSS3_S-4800-扫描电子显微镜
7. LED灯元器件极性的辨识
8. 架构制图--工具与方法论
9. 苹果审核内购图片无法上传的问题
10. 2022A特种设备相关管理（电梯）操作证考试题库模拟考试平台操作