# tui-table 表格

介绍

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

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

# 引入

# uni-app引入

第一种,手动引入(可全局引入)

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

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

# 微信小程序引入(可在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示例小程序码