TMUI4x(鸿蒙Next)

Appearance

TMUI4x2025-09-25
1156
4.6m

表格 xTable ​

在线预览
在线模拟尺寸:

介绍 ​

格式与antd一样。可以单独设置样式和整体列设置样式。也可以单独设置列宽，项目列宽虽然 可以auto，但数据多的情况下不要用，还是定义具体的百分比或者数字比较快的渲染。 1.具体想控制某一单元格的完全定义，可通过具名指定单元格插槽及行插槽，用于复杂的布局（使用插槽时，不可排序） 在单元格数据中 添加 {merge:{'key字段':{colspan:合并的列数}}}可以让当前单格向右合并下列（被合并的列数据将被隐藏不显示）。 在单元格数据中 添加 {showCheck:boolean},可以单独控制隐藏某一行不参与行选中(前提需要在x-tabale设置属性 :showCheck="true" 开启表格行选中功能)，行选中功能仅支持没有浮动置顶的数据表格。 不管是头还是单元格它的style格式是一样的 {style:{key字段:{bgStyle,textStyle,align:'对齐方式:flex-start,center,flex-end'}}} 具体的数据格式见demo页面

平台兼容 ​

HarmonyH5andriodIOS小程序UTSUNIAPP-X SDKversion
☑☑☑️☑️☑️☑️4.76+1.1.18

文件路径 ​

ts

@/uni_modules/tmx-ui/components/x-table/x-table.uvue

使用 ​

ts

<x-table></x-table>

Props 属性 ​

名称说明类型默认值
list源数据
Array():UTSJSONObject[] => [] as UTSJSONObject[]
columns列标题及字段定义
Array():xTableColumns[] => [] as xTableColumns[]
height容器的高，如果不设定，不会有上下滚动
而直接从上往下布局。如果数据多建议设置。
string"auto"
width容器的宽,不可以填写auto。
string"100%"
maxHeight最大高度
string"300"
cellHeight单元格的高，不能%
从1.1.18起允许为auto，或其它值，已经改为最小值，不再固定高，可以大段落自动断行了（早基sdk有bug实现不了目前经测试已无问题）
string"44"
cellWidth单元格的宽,不填写自动均分
它是允许任意值auto,%，固定值等
但我经过我测试auto，会影响原生渲染的速率（不是我影响的是自动布局的速率）
string""
fontSize单元格的文字大小
局部的设置会覆盖这里的
string"14"
fontColor单元格的文字颜色
局部的设置会覆盖这里的
string"#333333"
headerBgColor头的背景
string"#eeeeee"
darkHeaderBgColor暗黑时，如果未设置取inputDarkColor
string""
headerFontColor头的文字颜色,暗黑时取白
string"#333333"
ripple是否间隔波纹
booleantrue
rippleColor波纹颜色,
string"#fafafa"
rippleDarkColor波纹的暗黑颜色，不填写用的是sheetDark
string""
rowCellColor默认的行背景色，
通常你没有在数据中配置背景时，会读取这的颜色。
string"#ffffff"
rowCellDarkColor默认的行暗黑背景色，
通常你没有在数据中配置背景时，会读取这的颜色。
string"transparent"
safeTextWrap是否给文字高防止断行。
这是一个兼容性的试验参数，针对部分手机由于uni sdk原生安卓
上对文本的测量可能存在精度 问题，导致文本意外的断行。如果为true可以防止这种情况发生
可能会产生不能断行或者其它情况发生，请慎重使用。
booleanfalse
multiRowFloat是否启用多行固定功能
数据源中如果某行要滚动固定请添加一个字段float:true
默认关闭。
booleanfalse
selectable是否可选并复制文本
booleanfalse
refresh拉到底部时触发
如果返回Promise<any\
null> 底部刷新提示不会消失
类型null\
(type:string)=>Promise<any\
null>
null值时不被执行
unionnull
showScrollbar是否显示滚动条
booleanfalse
hideHead是否隐藏头
booleanfalse
showCheck是否显示并启用行选中功能。
booleanfalse
checkValue选中的行数据key(类似于id)，不能重复
Array():string[] => [] as string[]

Events 事件 ​

名称参数说明
cellClickitem: UTSJSONObjectkey: string单元格被点击
refresh-触底刷新时触发.
checkChangeids: string[]行被选中时触发

Slots 插槽 ​

名称说明数据
item2.key行插槽插槽名称就是列的字段名称name:字段名,sucore:utsobject数据-
item2.key+'-'+item.getString('key')--
refresh触底下拉刷新的插槽,你需要提供事件函数refresh才可开启-

Ref 方法 ​

名称参数返回值说明

示例文件路径 ​

json

/pages/zhanshi/table

示例源码 ​

uvue
vue
<template>
	<!-- #ifdef APP -->
	<scroll-view style="flex:1">
	<!-- #endif -->
	<!-- #ifdef MP-WEIXIN -->
	<page-meta :page-style="`background-color:${xThemeConfigBgColor}`">
		<navigation-bar :background-color="xThemeConfigNavBgColor" :front-color="xThemeConfigNavFontColor"></navigation-bar>
	</page-meta>
	<!-- #endif -->

		<x-sheet>
			<x-text font-size="18" class=" text-weight-b mb-8">表格 xTable</x-text>
			<x-text  color="#999999" >
				格式与antd一样，支持：单格向右合并，行选中，具名插槽定制，排序等功能。
			</x-text>
		</x-sheet>
		<x-sheet :padding="['0']">
			<x-table @checkChange="onChange" :checkValue="checkValue" :showCheck="true" ripple-color="#f6f7ff" ripple-dark-color="#161821" max-height="660px" :list="list" :columns="columns3" ></x-table>
		</x-sheet>
		
		<x-sheet>
			<x-text font-size="18" class=" text-weight-b mb-8">超出左右上下滚动</x-text>
			<x-text color="#999999">
				多行滚动自动固定顶部ios,安卓会并排固定在顶部。在web端只有最后一个固定在顶部
				尽量不要使用多行固定的功能，以防未知问题，或者性能问题。如果数据不多应该问题不大。
			</x-text>
		</x-sheet>
		<x-sheet :padding="['0']">
			<x-table :refresh="refresfun" :multiRowFloat="true" cellWidth="42%" max-height="250px" :list="list" :columns="columns" >
				<!-- #ifdef APP || WEB -->
				<template v-slot:age="{sucore}">
					<x-text color="primary">{{(sucore as UTSJSONObject).getAny('age')}}</x-text>
				</template>
				<template v-slot:address="{sucore}">
					<x-button @click="editeActions(sucore)" size="small" >编辑</x-button>
				</template>
				<!-- #endif -->
			</x-table>
		</x-sheet>
		<x-sheet>
			<x-text font-size="18" class=" text-weight-b ">定义样式</x-text>
		</x-sheet>
		<x-sheet :padding="['0']" >
			<x-table header-bg-color="primary" darkHeaderBgColor='primary' header-font-color="white" cellWidth="50%" max-height="450rpx" :list="list2" :columns="columns2" ></x-table>
		</x-sheet>
		<view style="height:50px"></view>
		
		<x-modal v-model:show="showEdite">
			<x-input v-model="editevalue" dark-bg-color=""></x-input>
			<x-text class="mt-12">
				确认后列表数据不会变动，我没有写业务逻辑，我这只是展示用法。
			</x-text>
		</x-modal>
		
	<!-- #ifdef APP -->
	</scroll-view>
	<!-- #endif -->
</template>

<script>
	import { xTableColumns } from "@/uni_modules/tmx-ui/interface.uts"
	export default {
		data() {
			const dataSource2 = [
				{
					key: '1',
					name: '胡彦斌1',
					age: "32",
					address: '西湖区',
					test:"第4数据"
				} as UTSJSONObject,
				{
					key: '2',
					name: '胡彦祖2',
					age: "36",
					address: '湖底公园1号',
					style:{
						age:{
							bgStyle:"background:#7e6539",
							textStyle:"font-size:16px;color:#ffffff"
							
						} as UTSJSONObject
					} as UTSJSONObject,
					test:"第4数据"
				} as UTSJSONObject,
				{
					key: '3',
					name: '胡彦斌3',
					age: "40",
					address: '公园1号',
					test:"第4数据"
				} as UTSJSONObject
			] as UTSJSONObject[]
			const dataSource = [
				{
					key: '1',
					name: '姓名及年龄不详',
					age: "32",
					address: '西湖区湖底湖底公园',
					// 本行是否悬浮在顶部，滚动时
					float:true,
					test:"第4数据",
					style:{
						"name":{
							align:"flex-center",
							bgStyle:'background-color:#d09e9e;',
							textStyle:'color:white'
						}
					},
					merge:{
						"name":{
							colspan:2,
						}
					}
				} as UTSJSONObject,
				{
					key: '2',
					name: '胡彦祖',
					age: "36",
					address: '西湖区湖底公园1号',
					float:true,
					test:"第4数据"
				} as UTSJSONObject,
				{
					key: '3',
					name: '胡彦斌',
					age: '40',
					address: '西湖区湖底公园1号',
					test:"第4数据"
					
				} as UTSJSONObject,
				{
					key: '4',
					name: '胡彦祖',
					age: "无年龄等信息",
					address: '西湖区湖底公园1号',
					test:"第4数据",
					style:{
						"age":{
							align:"flex-center",
							bgStyle:'background-color:#b5c6d9;',
							textStyle:'color:white'
						}
					},
					merge:{
						"age":{
							colspan:3,
						}
					}
				} as UTSJSONObject,
				{
					key: '5',
					name: '胡彦祖',
					age: "37",
					address: '西湖区湖底公园1号',
					test:"第4数据"
				} as UTSJSONObject,
				{
					key: '6',
					name: '胡彦斌',
					age: "38",
					address: '西湖区湖底湖底公园西湖区湖底湖底公园西湖区湖底湖底公园西湖区湖底湖底公园1号',
					test:"第4数据"
				} as UTSJSONObject,
				{
					key: '7',
					name: '胡彦祖',
					age: '39',
					address: '西湖区湖底公园1号',
					test:"第4数据"
				} as UTSJSONObject,
				{
					key: '8',
					name: '胡彦祖',
					age: '29',
					address: '西湖区湖底公园1号',
					test:"第4数据"
				} as UTSJSONObject,
				{
					key: '9',
					name: '统计小结',
					age: '这是总结栏，所有年龄为500岁哦。',
					address: '所有年龄为500岁哦。',
					test:"第4数据",
					style:{
						"address":{
							textStyle:'color:red;font-size:14px'
						}
					},
					merge:{
						"name":{
							colspan:2,
						},
						"address":{
							colspan:2,
						}
					},
					showCheck:false
				} as UTSJSONObject,
			] as UTSJSONObject[];
			
			const columnsData = [
				{
					title: '姓名',
					key: 'name',
				} as xTableColumns,
				{
					title: '年龄',
					key: 'age'
					
				} as xTableColumns,
				{
					title: '住址',
					key: 'address',
				} as xTableColumns,
				{
					title: '第4列',
					key: 'test',
				} as xTableColumns
			] as xTableColumns[];
			const columnsData2 = [
				{
					title: '姓名',
					key: 'name',
				} as xTableColumns,
				{
					title: '年龄',
					key: 'age',
					width:"160rpx",
					style:{
						age:{
							bgStyle:"background:#69349e",
							textStyle:"font-size:16px;color:#ffffff",
						} as UTSJSONObject
					} as UTSJSONObject
				} as xTableColumns,
				{
					title: '住址',
					key: 'address',
				} as xTableColumns,
				{
					title: '第4列',
					key: 'test',
				} as xTableColumns
			] as xTableColumns[];
			const columnsData3 = [
				{
					title: '姓名',
					key: 'name',
					width:'20%',
				} as xTableColumns,
				{
					title: '年龄',
					key: 'age',
					desc:true,
					width:'20%',
				} as xTableColumns,
				{
					title: '住址',
					key: 'address',
					width:'40%',
				} as xTableColumns,
				{
					title: '第4列',
					key: 'test',
					width:'20%',
				} as xTableColumns
			] as xTableColumns[];
			return {
				checkValue:['3'] as string[],
				showEdite:false,
				editevalue:'',
				list:dataSource,
				columns:columnsData,
				columns2:columnsData2,
				columns3:columnsData3,
				list2:dataSource2,
			};
		},
		methods:{
			onChange(checks:string[]){
				this.checkValue = checks
				console.log(`当前选中的行id:${this.checkValue}`)
			},
			editeActions(data:any|null){
				if(data==null) return;
				let value = (data! as UTSJSONObject).getAny('age')
				if(value!=null){
					let p = value! as string;
					this.editevalue = p;
					this.showEdite = true;
				}
			},
			refresfun(type:string):Promise<any|null>{
				return new Promise((res)=>{
					setTimeout(function() {
						res(null)
					}, 3500);
				})
			}
		}
	}
</script>

<style lang="scss">

</style>
最近更新