本文介绍: 表格组件一般用于展示大量结构化数据的场景。
目录
表格组件一般用于展示大量结构化数据的场景
#平台差异说明
App | H5 | 微信小程序 | 支付宝小程序 | 百度小程序 | 头条小程序 | QQ小程序 |
---|---|---|---|---|---|---|
√ | √ | √ | √ | √ | √ | √ |
#基本使用
本组件标签类似HTML的table表格,由table
、tr
、th
、td
四个组件组成
table
组件裹在最外层,可以配置一些基础参数tr
组件用于显示”行”数据th
组件用于显示表头内容,类似td
,不同之处在于字体加粗了,也带有背景颜色,也可以直接用td
替代th
td
组件不是最小单位,为了合并单元格时,内部可以嵌入tr
和td
组件
<template>
<u-table>
<u-tr>
<u-th>学校</u-th>
<u-th>班级</u-th>
<u-th>年龄</u-th>
</u-tr>
<u-tr>
<u-td>浙江大学</u-td>
<u-td>二年级</u-td>
<u-td>22</u-td>
</u-tr>
<u-tr>
<u-td>清华大学</u-td>
<u-td>05班</u-td>
<u-td>20</u-td>
</u-tr>
</u-table>
</template>
#兼容性
由于头条小程序
的兼容性问题,您需要给表格相关的组件(u-tr
、u-th
、u-td
)写上对应的类名才有效,如下:
<u-table>
<u-tr class="u-tr">
<u-th class="u-th">姓名</u-th>
<u-th class="u-th">年龄</u-th>
<u-th class="u-th">籍贯</u-th>
<u-th class="u-th">性别</u-th>
</u-tr>
<u-tr class="u-tr">
<u-td class="u-td">吕布</u-td>
<u-td class="u-td">22</u-td>
<u-td class="u-td">楚河</u-td>
<u-td class="u-td">男</u-td>
</u-tr>
</u-table>
#API
#Table Props
参数 | 说明 | 类型 | 默认值 | 可选值 |
---|---|---|---|---|
border-color | 表格边框的颜色 | String | #e4e7ed | – |
bg-color | 表格的背景颜色 | String | #ffffff | – |
align | 单元格的内容对齐方式,作用类似css的text-align |
String | center | left / right |
padding | 单元格的内边距,同css的padding 写法 |
String | 10rpx 0 | – |
font-size | 单元格字体大小,单位rpx | String | Number | 28 | – |
color | 单元格字体颜色 | String | #606266 | – |
th-style | th 单元格的样式,对象形式(将th 所需参数放在table 组件,是为了避免每一个th 组件要写一遍) |
Object | {} | – |
#Td Props
参数 | 说明 | 类型 | 默认值 | 可选值 |
---|---|---|---|---|
width | 单元格宽度百分比或者具体带单位的值,如30%, 200rpx等,一般使用百分比,单元格宽度默认为均分tr 的长度 |
String | Number | auto | – |
#Th Props
参数 | 说明 | 类型 | 默认值 | 可选值 |
---|---|---|---|---|
width | 标题单元格宽度百分比或者具体带单位的值,如30%, 200rpx等,一般使用百分比,单元格宽度默认为均分tr 的长度 |
String | Number | – | – |
原文地址:https://blog.csdn.net/m0_72603435/article/details/135490884
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如若转载,请注明出处:http://www.7code.cn/show_53844.html
如若内容造成侵权/违法违规/事实不符,请联系代码007邮箱:suwngjj01@126.com进行投诉反馈,一经查实,立即删除!
声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。