目录
#平台差异说明
#基本使用
#兼容性
#API
#Table Props
#Td Props
#Th Props
表格组件一般用于展示大量结构化数据的场景
#平台差异说明
| App | H5 | 微信小程序 | 支付宝小程序 | 百度小程序 | 头条小程序 | QQ小程序 |
|---|---|---|---|---|---|---|
| √ | √ | √ | √ | √ | √ | √ |
#基本使用
本组件标签类似HTML的table表格，由table、tr、th、td四个组件组成文章来源：https://www.toymoban.com/news/detail-786488.html
-
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)写上对应的类名才有效，如下：文章来源地址https://www.toymoban.com/news/detail-786488.html
<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 | - | - |
到了这里，关于uniapp中uview组件库丰富的Table 表格的使用方法的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
