前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >elementUI中的el-table标签介绍

elementUI中的el-table标签介绍

作者头像
算法与编程之美
发布2021-11-15 16:25:54
1.8K0
发布2021-11-15 16:25:54
举报

1 问题

介绍el-table标签的用法以及el-table标签里面的属性。

2 方法

el-table标签是element中的表格标签,而table表格用于展示多条结构类似的数据,可对数据进行排序、筛选、对比或其他自定义操作。

首先<el-table></el-table>在<el-table>中可以设置一个对象数组

如图,在javascript中可以定义一个object:[](这里的object是自定义名字)来表示一个对象数组

在<el-table></el-table>中还有<el-table-column></el-table-column>标签

在el-table-column用prop属性来对应对象中的键名即可填入数据,用label属性来定义表格的列名,还可以用width属性来定义一列的宽度。

如下图:

键名对应的也要设置一个对象(名字自定义),如下图:

设置一个对象来存放数据。

果如下图:

以上就是创建一个简单的表格,以及对其属性进行设置。

4 结语

本文章对elementUI中的el-table标签进行了简单的介绍,除了prop(键名)和laber(列名)属性,还能够在<script>标签里面也可以创建其他样式的表格。

实习编辑:王晓姣

稿件来源:深度学习与文旅应用实验室(DLETA)

本文参与 腾讯云自媒体分享计划,分享自微信公众号。
原始发表:2021-11-08,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 算法与编程之美 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档