「uni-app 组件」t-table 表格

Posted 2023-04-26

参考技术A

table 表格基本使用组件，让你制作简单表格只需要专注内容，而不用过度专注样式。

此组件基本全平台支持。（支付宝，百度，头条小程序理论上都支持，但是没有很细致的测试这几个平台）

github 地址： https://github.com/mehaotian/t-table
插件市场地址：http://ext.dcloud.net.cn/plugin?id=413

功能亮点

未实现

效果演示

表格父组件，仅包含 tr 组件

属性说明

表格行组件 仅包含 th , td 组件

属性说明

表格内的表头单元格组件

属性说明

表格中的标准单元格组件

属性说明

Tips

uni-app：封装组件

Vue封装组件
根据官方文档来做其实很简单，我这里记录一下注意点。

通过uni-app的easycom： 将组件引入精简为一步。只要组件安装在项目的 components 目录下，并符合
components/组件名称/组件名称.vue 目录结构。就可以不用引用、注册，直接在页面中使用。

找到 components 目录，在下面创建你的组件目录和组件vue，要名称一致。

注意点：
props 可以是数组或对象，用于接收来自父组件的数据。HTML 中的 attribute 名是大小写不敏感的，所以浏览器会把所有大写字符解释为小写字符。
也就是说你在封装组件里面的属性是contentText，在传值的时候就是content-text。

这是我封装的空数据占位图，大家可以参考使用。

<template>
	<view class="fq-empty">
		<image src="/static/image/empty-view.png"></image>
		<text class="">emptyText</text>
	</view>
</template>

<script>
	export default 
		props: 
			// 检测类型 + 其他验证
			emptyText: 
				type: String,
				default: '什么都没有',
			
		,
	
</script>

<style>
	.fq-empty 
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		font-size: 16px;
	

	.fq-empty image 
		width: 300rpx;
		height: 300rpx;
		margin: 30rpx;
	
</style>

使用案例

<!-- 无数据 -->
	<template v-else>
		 <fq-empty empty-text="暂无订单"></fq-empty>
	 </template>