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

目录

#平台差异说明

#基本使用

#兼容性

#API

#Table Props

#Td Props

#Th Props

---

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

#平台差异说明

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

#基本使用

本组件标签类似HTML的table表格，由table、tr、th、td四个组件组成

• table组件裹在最外层，可以配置一些基础参数
• tr组件用于显示"行"数据
• th组件用于显示表头内容，类似td，不同之处在于字体加粗了，也带有背景颜色，也可以直接用td替代th
• td组件不是最小单位，为了合并单元格时，内部可以嵌入tr和td组件

#兼容性

由于头条小程序的兼容性问题，您需要给表格相关的组件(u-tr、u-th、u-td)写上对应的类名才有效，如下：

	
		姓名
		年龄
		籍贯
		性别
	
	
		吕布
		22
		楚河
		男
	

#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	-	-