ThorUI文档

# tui-table 表格

介绍

表格由tui-table、tui-tr、tui-td三个组件组成。

手机的窄屏对于表格来说总不是最佳选择，所以如果可能的话，还是避免使用这种形式。

# 引入

# uni-app引入

第一种，手动引入（可全局引入）

import tuiTable from "@/components/thorui/tui-table/tui-table.vue"
import tuiTr from "@/components/thorui/tui-tr/tui-tr.vue"
import tuiTd from "@/components/thorui/tui-td/tui-td.vue"
export default {
	components:{
		tuiTable,
		tuiTr,
		tuiTd
	}
}

第二种，开启easycom组件模式，如果不了解如何配置，可先查看 官网文档 (opens new window)。

# uni-app版本平台差异说明

App-Nvue App-vue H5 微信小程序 支付宝小程序 百度小程序 字节小程序 QQ小程序
升级中 √ √ √ √ 升级中 升级中 升级中

# 微信小程序引入（可在app.json中全局引入）

{
  "usingComponents": {
    "tui-table": "/components/thorui/tui-table/tui-table",
	"tui-tr": "/components/thorui/tui-tr/tui-tr",
	"tui-td": "/components/thorui/tui-td/tui-td"
  }
}

# 代码演示

部分功能演示，具体可参考示例程序以及文档API。

基础使用
<!--uni-app-->
<tui-table>
	<tui-tr>
		<tui-td bold v-for="(item,index) in header" :key="index" :span="8">{{item.title}}</tui-td>
	</tui-tr>
	<tui-tr v-for="(item, index) in listData" :key="index">
		<tui-td :span="8" v-for="(obj, idx) in header" :key="idx">{{item[obj.key]}}</tui-td>
	</tui-tr>
</tui-table>

<!--微信小程序-->
<tui-table>
	<tui-tr>
		<tui-td bold wx:for="{{header}}" wx:key="index" span="{{8}}">{{item.title}}</tui-td>
	</tui-tr>
	<tui-tr wx:for="{{listData}}" wx:key="index">
		<tui-td span="{{8}}" wx:for-items="{{header}}" wx:for-item="obj" wx:for-index="idx" wx:key="idx">{{item[obj.key]}}</tui-td>
	</tui-tr>
</tui-table>

//data数据
header: [{
		title: '姓名',
		key: 'name'
	},
	{
		title: '年龄',
		key: 'age'
	},
	{
		title: '地址',
		key: 'address'
	}
],
listData: [{
		id: 1,
		name: '张三',
		age: '18',
		address: '上海市普陀区金沙江路'
	},
	{
		id: 2,
		name: '李四',
		age: '16',
		address: '上海市普陀区金沙江路'
	},
	{
		id: 3,
		name: '王小虎',
		age: '38',
		address: '上海市普陀区金沙江路'
	}
]

# Slots

# tui-table

名称 说明
default table内自定义内容

# tui-tr

名称 说明
default tr内自定义显示内容

# tui-td

名称 说明
default td内自定义显示内容

# Props

# tui-table

参数 类型 说明 默认值
borderWidth String 边框宽度，不需要传0即可 1rpx
borderColor String 边框颜色 #EAEEF5
borderTop Boolean 是否需要上边框 true
borderLeft Boolean 是否需要左边框 true
borderBottom Boolean 是否需要下边框 false
borderRight Boolean 是否需要右边框 false

# tui-tr

参数 类型 说明 默认值
backgroundColor String 背景色 #fff
borderWidth String 边框宽度 1rpx
borderColor String 边框颜色 #EAEEF5
borderLeft Boolean 是否需要左边框 false
borderTop Boolean 是否需要上边框 false
flexWrap Boolean 是否换行 false
fixed Boolean 是否固定 false
left String left值，fixed为true时生效 0
right String right值，fixed为true时生效 0
top String top值，fixed为true时生效 H5 : 44px，非H5 : 0
marginTop String margin-top值 0
index Number 行索引 0
params String 自定义参数 -

# tui-td

参数 类型 说明 默认值
span Number 跨度（1~24），24栅格栏，width不传值时生效 24
width String 宽度 -
height String 高度 auto
size Number 字体大小，单位rpx 30
color String 字体颜色 #333
bold Boolean 字体是否加粗 false
backgroundColor String 背景色 transparent
borderWidth String 边框宽度 1rpx
borderColor String 边框颜色 #EAEEF5
borderRight Boolean 是否需要右边框 true
borderBottom Boolean 是否需要下边框 false
borderLeft Boolean 是否需要左边框 false
ellipsis Boolean 文字超出是否隐藏 false
padding String padding值 12rpx
alignItems String 元素对齐方式：left,center,right left
textAlign String 文本对齐：left,center,right left
shrink Boolean 是否收缩 true
flexGrow Boolean 是否铺满剩余空间 false
top Boolean 是否显示在上方，列固定时使用 false
hidden Boolean 是否隐藏 false
index Number 索引值 0
keys String 字段属性key -

# Events

# tui-table

none

# tui-tr

事件名 说明 回调参数
click 点击tr时触发 { index : 索引 , params : 自定义参数 }

# tui-td

事件名 说明 回调参数
click 点击td时触发 { index : 索引 , key : 字段属性key }

# 预览

请以移动端效果为准，touch事件目前尚未在PC端做兼容。

# 线上程序扫码预览

ThorUI组件库 H5二维码 ThorUI示例
ThorUI组件库小程序码 H5二维码 ThorUI示例小程序码

← tui-grade 评分 →