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

事件名	说明	回调参数
-	-	-

tui-tr

注：uni-app端绑定事件使用@前缀，如@click；微信小程序原生使用bind前缀，如bindclick

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

tui-td

注：uni-app端绑定事件使用@前缀，如@click；微信小程序原生使用bind前缀，如bindclick

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

预览

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

特别说明

该组件为 会员组件，非开源内容，需开通会员才可获取使用。

线上程序扫码预览

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