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

2024-01-09 22:51:34

目录

#平台差异说明

#基本使用

#兼容性

#API

#Table Props

#Td Props

#Th Props


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

#平台差异说明

AppH5微信小程序支付宝小程序百度小程序头条小程序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-alignStringcenterleft / right
padding单元格的内边距,同css的padding写法String10rpx 0-
font-size单元格字体大小,单位rpxString | Number28-
color单元格字体颜色String#606266-
th-styleth单元格的样式,对象形式(将th所需参数放在table组件,是为了避免每一个th组件要写一遍)Object{}-

#Td Props

参数说明类型默认值可选值
width单元格宽度百分比或者具体带单位的值,如30%, 200rpx等,一般使用百分比,单元格宽度默认为均分tr的长度String | Numberauto-

#Th Props

参数说明类型默认值可选值
width标题单元格宽度百分比或者具体带单位的值,如30%, 200rpx等,一般使用百分比,单元格宽度默认为均分tr的长度String | Number--

文章来源:https://blog.csdn.net/m0_72603435/article/details/135490884
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。