uView

# Table 表格

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

# 平台差异说明

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

# 基本使用

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

  • table组件裹在最外层，可以配置一些基础参数
  • tr组件用于显示"行"数据
  • th组件用于显示表头内容，类似td，不同之处在于字体加粗了，也带有背景颜色，也可以直接用td替代th
  • td组件不是最小单位，为了合并单元格时，内部可以嵌入tr和td组件
<template>
	<u-table :align="align" :borderType="borderType" :theme="theme">
		<u-tr class="u-tr">
			<u-th width="200rpx" class="u-th">姓名</u-th>
			<u-th width="200rpx" class="u-th">年龄</u-th>
			<u-th width="200rpx" class="u-th">籍贯</u-th>
			<u-th width="200rpx" class="u-th">性别</u-th>
		</u-tr>
		<u-tr class="u-tr">
			<u-td width="200rpx" class="u-td">吕布</u-td>
			<u-td width="200rpx" class="u-td">22</u-td>
			<u-td width="200rpx" class="u-td">楚河</u-td>
			<u-td width="200rpx" class="u-td">男</u-td>
		</u-tr>
		<u-tr class="u-tr">
			<u-td width="200rpx" class="u-td">项羽</u-td>
			<u-td width="200rpx" class="u-td">28</u-td>
			<u-td width="200rpx" class="u-td">汉界</u-td>
			<u-td width="200rpx" class="u-td">男</u-td>
		</u-tr>
		<u-tr class="u-tr">
			<u-td width="200rpx" class="u-td">木兰</u-td>
			<u-td width="200rpx" class="u-td">24</u-td>
			<u-td width="200rpx" class="u-td">南国</u-td>
			<u-td width="200rpx" class="u-td">女</u-td>
		</u-tr>
	</u-table>
</template>
<script>
	export default {
		data() {
			return {
				borderType: 'default',
				align: 'center',
				theme: 'normal'
			}
		}
	}
</script>

# 边框颜色

可以通过设置borderColor来控制表格边框的颜色。

<template>
	<u-table borderColor="#303030">
		<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-table>
</template>

警告

当使用了borderColor后，borderType将失效，关怀模式的颜色也会失效。

# 边框颜色类型
FPI

可以通过设置borderType来控制表格边框的颜色。

<!-- 3种颜色可选择 gray/primary/warning -->
<template>
	<u-table borderType="gray">
		<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-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

参数 说明 类型 默认值 可选值
theme
FPI
 主题模式，普通模式normal，关怀模式care String normal care
border-color 表格边框的颜色，优先级高于border-type String - 色值
border-type
FPI
 表格边框的颜色类型 String gray gray/primary/warning
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 - -

← ActionSheet 操作菜单 →