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

目录

#平台差异说明

#基本使用

#兼容性

#API

#Table Props

#Td Props

#Th Props

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

#平台差异说明

#基本使用

本组件标签类似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

#Td Props

#Th Props