uniapp中uview组件库丰富的Table 表格的使用方法

目录

#平台差异说明

#基本使用

#兼容性

#API

[#Table Props](#Table Props)

[#Td Props](#Td Props)

[#Th Props](#Th Props)


表格组件一般用于展示大量结构化数据的场景

#平台差异说明

App H5 微信小程序 支付宝小程序 百度小程序 头条小程序 QQ小程序

#基本使用

本组件标签类似HTML的table表格,由tabletrthtd四个组件组成

  • table组件裹在最外层,可以配置一些基础参数

  • tr组件用于显示"行"数据

  • th组件用于显示表头内容,类似td,不同之处在于字体加粗了,也带有背景颜色,也可以直接用td替代th

  • td组件不是最小单位,为了合并单元格时,内部可以嵌入trtd组件

    <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-tru-thu-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 - -
相关推荐
会点法律的程序员4 分钟前
小程序 地理位置授权怎么搞
前端·小程序·uni-app
重生之我是菜鸡程序员12 分钟前
uniapp 顶部通知 上滑隐藏
前端·javascript·uni-app
FliPPeDround29 分钟前
告别 uni-app 启动烦恼:@uni-helper/unh 让开发流程更顺畅
前端·微信小程序·uni-app
2501_915921433 小时前
iOS 26 电耗监测与优化,耗电问题实战 + 多工具 辅助策略
android·macos·ios·小程序·uni-app·cocoa·iphone
2501_915921433 小时前
苹果软件混淆与 iOS 应用加固白皮书,IPA 文件加密、反编译防护与无源码混淆方案全解析
android·ios·小程序·https·uni-app·iphone·webview
anyup4 小时前
🔥开源零配置!10 分钟上手:create-uni + uView Pro 快速搭建企业级 uni-app 项目
前端·前端框架·uni-app
你真的可爱呀4 小时前
uniapp学习【vue3在uniapp中语法,使用element,使用uView UI】
学习·uni-app
保利威直播4 小时前
保利威uniapp直播插件功能清单-开播端/主播端/观看端(持续测试更新中...)
uni-app·直播·直播平台
dcloud_jibinbin5 小时前
【uniapp】体验优化:开源工具集 uni-toolkit 发布
前端·webpack·性能优化·小程序·uni-app·vue