uniapp 自制表格的基本知识

前言

推荐阅读：

1. uni-table 组件资料
2. java框架 零基础从入门到精通的学习路线 附开源项目面经等（超全）

1. 基本知识

• UniApp 中的表格组件 <uni-table>: 创建表格，通过使用该组件，可以轻松地在应用中创建表格，并设置表格的样式、边框、行高亮等属性

• <uni-tr> 和 <uni-td>: 在 组件内部，使用 <uni-tr> 来定义表格的行，而在 <uni-tr> 内部使用 <uni-td> 来定义表格的单元格

• <uni-th> 表格头
  这样的结构可以帮助你更加清晰地组织和管理表格的内容。

表格的基本样式和属性:

• border：设置表格是否显示边框
• stripe：设置是否显示斑马线条纹效果
• emptyText：设置当表格没有数据时显示的文本内容

单元格的合并和对齐:

• rowspan：设置单元格跨越的行数
• colspan：设置单元格跨越的列数
• align：设置单元格内文本的水平对齐方式，可以是 left、center 或 right

动态绑定数据:
在示例中，使用了 Mustache 语法 {{}} 来绑定数据到表格中。这些数据可以是 Vue.js 实例中定义的属性，也可以是计算属性或方法返回的结果。

动态生成多行数据:
在示例中，通过遍历数据对象 infoMechRuningTableData 来动态生成表格的多行数据

样式的补充:
可以在 <style> 标签中定义表格的样式，包括单元格的背景色、字体样式、边框样式等，以满足设计要求

事件处理和交互功能:
如果需要在表格中添加交互功能，比如点击表头排序、点击单元格查看详情等，可以使用 Vue.js 的事件处理机制来实现。通过监听用户的操作并在相应的事件处理函数中更新数据或者执行其他操作来实现交互功能

---

设计表格之前，注意这些事项：

1. uni-table组件是用于创建表格的主要元素，而其叶子节点（即直接子节点）必须是uni-tr，而在uni-tr中，叶子节点必须是uni-th或uni-td，这两个标签分别表示表头单元格和数据单元格

2. 一个表格内理论上只能包含表头行，这意味着在uni-table中应该首先定义表头行（uni-tr），然后在每行中使用uni-th来定义表头的内容。

3. 在表格的设计中，目前只能在uni-th中设置width属性，而uni-td的宽度则会跟随uni-th的宽度变化。这意味着表格中数据单元格的宽度将会根据对应表头单元格的宽度自动调整，从而保持对齐和整体美观

综上所述，UniApp中的表格设计遵循一定的规则：使用uni-table作为表格容器，内部使用uni-tr定义行，而每行中的叶子节点应该是uni-th或uni-td，从而确保表格结构的合理性和可读性

（也可通过td来控制表头：
类似博主的代码

2. Demo

tr为行，行里头设置一个表头

<uni-tr> 
	<uni-th align="center" colspan="1">{{formModel.equipmentNo}}检查</uni-th>
	<uni-th align="center" >检查类型</uni-th>
	<uni-th align="center" >最近检查</uni-th>
	<uni-th align="center"  colspan="2">检查内容</uni-th>
	<uni-th align="center"  colspan="2">备注</uni-th>
</uni-tr>
1
2
3
4
5
6
7

如果在列里头设置表头也可，类似如下代码：

<!-- 检查占据五行 -->
<!-- 此处双向绑定需要使用:rowspan 而不是rowspan -->
<uni-tr> 
	<uni-td align="center" :rowspan="checkTypesCount + 1" colspan="1">{{formModel.equipmentNo}}检查</uni-td>
	<uni-td align="center" class="color expand-width">检查类型</uni-td>
	<uni-td align="center" class="color expand-width">最近检查</uni-td>
	<uni-td align="center" class="color expand-width"  colspan="2">检查内容</uni-td>
	<uni-td align="center" class="color expand-width"  colspan="2">备注</uni-td>
</uni-tr>

<uni-tr v-for="(item, index) in infoDocheckTableData" :key="'docheck_' + index">
	<uni-td align="center" class="expand-width">{{item.checkType}}</uni-td>
	<uni-td align="center" class="expand-width">{{item.checkDate}}</uni-td>
	<uni-td align="center" class="expand-width"  colspan="2">{{item.project}}</uni-td>
	<uni-td align="center" class="expand-width"  colspan="2">{{item.remark}}</uni-td>
</uni-tr> 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

其中计算表中多少数据可以使用watch来监听数据多少行以此变化：

// 主要为了监视表单的跨行数据
watch: {
  infoDocheckTableData: {
    handler(newValue, oldValue) {
		if (newValue !== oldValue) {
			this.checkTypesCount = this.calculateUniqueCheckTypesCount();
		}
    },
    deep: true
  },

methods: {
	// 计算检查表单的跨行数据
	calculateUniqueCheckTypesCount() {
	    const uniqueCheckTypes = new Set();
		// 通过计算它的类型个数 checkType
	    this.infoDocheckTableData.forEach(item => {
	      uniqueCheckTypes.add(item.checkType);
	    });
	    return uniqueCheckTypes.size;
	},
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

对应的css如下：

<style lang="scss" scoped>
	.u-popup-slot {
		width: 200px;
		height: 80px;
		@include flex;
		justify-content: center;
		align-items: center;
		margin-bottom: 10rpx;
	}
	// 表单的背景色
	.color{
		background-color: #5BC648;
	}
	// 增加表单宽度
	.expand-width {
	        width: 200rpx;
	    }
	.uni-td {
		font-size: 8px; /* 设置字号为 12 像素 */
	}

</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

对于的结果如下：