组件名:uni-table

代码块: uTable

点击下载&安装 (opens new window)

用于展示多条结构类似的数据

# 介绍

# 基本用法

表格是由4个组件: uni-table表格组件、uni-tr表格行 、uni-th 表格头、uni-td 单元格组成

需要注意的是:

  • uni-table 的根节点一定是 uni-tr
  • uni-tr 的根节点一定是 uni-th 或者 uni-td
  • 一个表格内理论上只能包含表头行
  • 目前只能在 uni-th 中设置 width 属性,uni-td 的宽度跟随 uni-th 宽度变化
<uni-table border stripe emptyText="暂无更多数据" >
	<!-- 表头行 -->
	<uni-tr>
		<uni-th align="center">日期</uni-th>
		<uni-th align="center">姓名</uni-th>
		<uni-th align="left">地址</uni-th>
	</uni-tr>
	<!-- 表格数据行 -->
	<uni-tr>
		<uni-td>2020-10-20</uni-td>
		<uni-td>Jeson</uni-td>
		<uni-td>北京市海淀区</uni-td>
	</uni-tr>
	<uni-tr>
		<uni-td>2020-10-21</uni-td>
		<uni-td>HanMeiMei</uni-td>
		<uni-td>北京市海淀区</uni-td>
	</uni-tr>
	<uni-tr>
		<uni-td>2020-10-22</uni-td>
		<uni-td>LiLei</uni-td>
		<uni-td>北京市海淀区</uni-td>
	</uni-tr>
	<uni-tr>
		<uni-td>2020-10-23</uni-td>
		<uni-td>Danner</uni-td>
		<uni-td>北京市海淀区</uni-td>
	</uni-tr>

</uni-table>

# API

# Table Props

属性名 类型 默认值 可选值 说明
border Boolean false - 是否带有纵向边框
stripe Boolean true - 是否显示斑马线样式
type String '' - 值为type="selection" 时开启多选
emptyText String 没有更多数据 - 空数据时显示的文本内容
loading Boolean false - 显示加载中

# Table Events

事件称名 说明 返回参数
selection-change 开启多选时,当选择项发生变化时会触发该事件 Function(Object)

# Table Methods

Tips: 因微信小程序框架问题,暂不支持如下方法

方法称名 说明 参数
selectionAll 选中全部行 -
toggleRowSelection 用于多选表格,切换某一行的选中状态,如果使用了第二个参数,则是设置这一行选中与否(selected 为 true 则选中) Function(Array:[行索引],Boolean:selected)
clearSelection 用于多选表格,清空用户的选择 -
toggleAllSelection 用于多选表格,切换所有行的选中状态 -

# Th Props

属性名 类型 默认值 可选值 说明
width String - - 单元格宽度
align String left left/center/right 表头对齐方式
filter-type String search/select/range/date 筛选类型,search关键字搜索,select类别选择
filter-data Array 筛选数据
sortable Boolean false - 是否启用排序

filter-data 示例

[{
	text: "", //显示
	value: "" // 值
}]

# Th Events

事件称名 说明 返回参数
sort-change 点击排序时会触发该事件 Function(Object)
filter-change 筛选数据时会触发该事件 Function(Object)

filter-change(e) 说明

e = {
	filterType: "", //筛选类型 search/select/range 和传入的相同
	filter: "" // 值, filterType=search字符串类型,filterType=select数组类型,filterType=range数组类型,[0]开始值, [1]结束值
}

# Td Props

属性名 类型 默认值 可选值 说明
align String left left/center/right 单元格对齐方式

# 示例

注意

示例依赖了 uni-card uni-section uni-scss 等多个组件,直接拷贝示例代码将无法正常运行 。

请到 组件下载页面 (opens new window) ,在页面右侧选择 使用 HBuilderX导入示例项目 ,体验完整组件示例。

Template

Script

Style

tableData.js

<template>
	<view>
		<view class="uni-container">
			<uni-table ref="table" :loading="loading" border stripe type="selection" emptyText="暂无更多数据" @selection-change="selectionChange">
				<uni-tr>
					<uni-th width="150" align="center">日期</uni-th>
					<uni-th width="150" align="center">姓名</uni-th>
					<uni-th align="center">地址</uni-th>
					<uni-th width="204" align="center">设置</uni-th>
				</uni-tr>
				<uni-tr v-for="(item, index) in tableData" :key="index">
					<uni-td>{{ item.date }}</uni-td>
					<uni-td>
						<view class="name">{{ item.name }}</view>
					</uni-td>
					<uni-td align="center">{{ item.address }}</uni-td>
					<uni-td>
						<view class="uni-group">
							<button class="uni-button" size="mini" type="primary">修改</button>
							<button class="uni-button" size="mini" type="warn">删除</button>
						</view>
					</uni-td>
				</uni-tr>
			</uni-table>
			<view class="uni-pagination-box"><uni-pagination show-icon :page-size="pageSize" :current="pageCurrent" :total="total" @change="change" /></view>
		</view>
	</view>
</template>

完整示例演示 (opens new window)