TMUI 3.1.05
Search K

Appearance

On this page

组件库文档 tmui.design ​

表格 Table ​

本组件主要的功能有：

  1. 单元格特定的样式，类型（按钮，文本）
  2. 纵向单列统一的样式设置，比如背景颜色，亮浅，宽度，排序等
  3. 斑马纹的开启和关闭

如果看不懂文档，请复制demo示例查看，demo包含了所有可能用到的功能。

提醒

3.0.9+开始,table组件进行了改版,主要是为了解决非nvue端的性能问题. 由于nvue是使用nvue原生组件实现,所以性能这块不用担心.并且支持头部固定的功能,左侧固定功能删除了. 非nvue端没有固定的头部,并且取消了scroll-view,而采用原始的view组件生成滚动. 3.0.9开始采用同阿里的antv/S2数据结构,方便后续的功能更新迭代.

🌶️ 表格 Table 示例 ​

查看模拟效果＋
示例模板
vue
<template>
	<tm-app>
		<tm-sheet>
			<tm-text :font-size="24" color='red' _class="font-weight-b" label="从3.0.9开始不向下兼容,老项目请继续使用3.0.89的版本即可"></tm-text>
			<tm-text :font-size="28"  label="从3.0.9开始,table组件进行了改版,主要是为了解决非nvue端的性能问题.
			由于nvue是使用nvue原生组件实现,所以性能这块不用担心.并且支持头部固定的功能,左侧固定功能删除了.
			非nvue端没有固定的头部,并且取消了scroll-view,而采用原始的view组件生成滚动.
			3.0.9开始采用同阿里的antv/S2数据结构,方便后续的功能更新迭代.
			"></tm-text>
			<view class="flex flex-row">
				<tm-tag checkable v-model:checked="showFixed" @click="showFixed=!showFixed" label="显示/隐藏头部"></tm-tag>
				<tm-tag checkable v-model:checked="stripe" @click="stripe=!stripe" label="显示/隐藏条纹"></tm-tag>
			</view>
			<tm-divider></tm-divider>
			<tm-table :table-data="data" :stripe="stripe" :showHeader="showFixed" @rowClick='onClick' :height="650" :width="638" ></tm-table>
		</tm-sheet>
	</tm-app>
</template>
<script lang="ts" setup>
	import {
		ref
	} from "vue"
	import {
		onShow,
		onLoad
	} from "@dcloudio/uni-app";
	import tmApp from "@/tmui/components/tm-app/tm-app.vue"
	import tmSheet from "@/tmui/components/tm-sheet/tm-sheet.vue"
	import tmText from "@/tmui/components/tm-text/tm-text.vue"
	import tmTable from "@/tmui/components/tm-table/tm-table.vue"
	import tmDivider from "@/tmui/components/tm-divider/tm-divider.vue"
	import tmTag from "@/tmui/components/tm-tag/tm-tag.vue"
	import {testData,testData2} from "./smpledata"

	const showFixed = ref(true)
	const stripe = ref(false)
	const data = ref(testData)

	function onClick(row:number, col:number) {
		uni.$tm.u.toast("行:" + String(row) + ",列" + String(col))
	}
	

</script>

<style>

</style>

🌶️ 兼容性 ​

APP-VUEAPP-NVUE小程序WEB/H5VUE3/TS
✔️✔️✔️✔️✔️

🌱 参数 ​

本组件含有公共属性 公共属性

参数名类型默认值描述
showHeaderBooleantrue是否展示表头
tableDataArrayasPropType<Array<cellItem>>()=>[],required:true表格数据，格式见下方
widthNumber750宽度，单位rpx
heightNumber0高度，单位rpx
cellHeightNumber72单元格高度
headerHeightNumber88表头高度
showBottomBorderBooleantrue是否展示底部边框

表头和表格数据格式

以下内容，请认真阅读，这关系到你是否正确的使用本组件的所有技巧。

ts
// 数据示例,详细类型推断见下方类型格式。

const demoData = {
    fields: {
        columns: ['province', 'city', 'type', 'price', 'cost'],
    },
    header: [
        {
            field: 'province',
            name: '省份',
        },
        {
            field: 'city',
            name: '城市',
            "opts":{
                "color":'primary',
                "fontColor":"",
                "light":true,
                "asyncStyleCell":true
            }
        },
        {
            field: 'type',
            name: '类别地类别sfd地',
        },
        {
            field: 'price',
            name: '价格',
            "opts":{
                "sort":true
            }
        },
        {
            field: 'cost',
            name: '成本',
            
        },
    ],
    data: [
        {
            "province": "浙江",
            "city": "杭州",
            "type": "笔",
            "price": 1
        },
        {
            "province": "浙江",
            "city": "舟山",
            "type": "笔",
            "price": 17,
            "opts":{
                "city":{fontColor:'yellow'},
                "type":{color:'yellow'},
            }
        }
    ]
}

/** opts单元格的样式定制 */
export const defaultCellStyle:tabaleCellStyleType = {
    type:'text',
    color:'white',
    fontColor:'black',
    fontSize:26,
    light:false,
    transparent:true,
    asyncStyleCell:false,
    sort:false,
}
export interface tabaleCellData {
    value:string|number,
    opts:tabaleCellStyleType,
    [key: string]: any;
}
export interface tabaleCellStyleType {
    type?:'button'|'text',
    color?:string,
    fontColor?:string,
    fontSize?:number,
    light?:boolean,
    transparent?:boolean,
    /**是否头和所在列同步同的背景色和文字色,注意该参数只在header中的opts有效 */
    asyncStyleCell?:boolean,
    /**该列是否显示 排序功能，注意该参数只在header中的opts有效 */
    sort?:boolean,

}
/** 表头数据格式 */
export interface headerType {
    /**字段变量名*/
    field: string,
    /**字段名称 */
    name: string,
    opts?:tabaleCellStyleType,
    [key: string]: any;
}
/** 数据格式 */
export interface tableDataType {
    /**列字段名称 */
    fields:{
        columns:string[]
    },
    /**头数据,对应fields中columns字段 */
    header:Array<headerType>,
	/** 表格数据 */
    data:Array<{
        opts?:{
            [key:string]:tabaleCellStyleType
        },
        [key: string]: any;
    }>
}

🌹 事件 ​

​

事件名参数返回数据描述
row-click(rowIndex:number,colIndex:number)单元按钮被点击时触发
ts
function rowClick(rowIndex:number,colIndex:number,value:string|number){
	// rowIndex横向索引
	// colIndex纵向列的索引
	// 单元格的内容
}

🌽 slot插槽 ​

默认default

🥗 ref方法 ​

无

💏 文档贡献 ​

此页文档由夏天贡献，如果对该框架感兴趣的可以参与我们一同进步！