HBuild——创建表格

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	</table>
	<br />
	<table border = "1" width="100%">
		<tr>
			<td colspan="4">动漫类型</td>
			<tr>
				<td rowspan="2">搞笑</td>
				
					<td>罗小黑</td>
					<td>狐妖</td>
					<td>柯南</td>
				<tr>
					<td>龙猫</td>
					<td>千与千寻</td>
					<td>萤火之森</td>
				</tr>
				
				<tr>
					<td rowspan="3">热血</td>
						<td>罗小黑</td>
						<td>狐妖</td>
						<td>柯南</td>
				<tr>
						<td>龙猫</td>
						<td>千与千寻</td>
						<td>萤火之森</td>
				</tr>
				</tr>
			</tr>
			
		</tr>
		<tr>
			<td rowspan="4"></td>
		</tr>
	</table>
	<body>
	</body>
</html>

在这里插入图片描述

### 如何在 UniApp 中实现表格固定列效果 #### 创建新项目并配置环境 为了实现在 UniApp 中创建带有固定列的表格,需先建立新的 UniApp 项目,并确保已安装必要的依赖项。接着,在此项目下新增一个名为 `ScoreTable.vue` 的页面用于承载成绩表功能[^1]。 #### 使用 mosowe-table 组件简化开发过程 考虑到复杂度以及用户体验优化的需求,推荐采用现成的高级表格组件——mosowe-table 来快速搭建具备固定列特性的表格结构。该组件不仅支持基础的数据展示需求,还提供了诸如多选框、索引列等功能特性;更重要的是它允许开发者轻松设定哪些列为固定的,从而达到视觉上的稳定性和良好的交互体验[^4]。 ```vue <template> <view class="container"> <!-- 表格容器 --> <mosowe-table :columns="tableColumns" :data-source="dataTable"></mosowe-table> </view> </template> <script> export default { data() { return { tableColumns: [ { title: '姓名', key: 'name', fixed: true }, // 设置为固定列 { title: '语文', key: 'chinese' }, { title: '数学', key: 'math' } ], dataTable: [ { name: '张三', chinese: 90, math: 85 }, { name: '李四', chinese: 88, math: 92 } ] }; } }; </script> ``` 上述代码片段展示了如何利用 mosowe-table 实现简单的学生成绩表,其中包含了两门课程的成绩记录。特别注意这里设置了“姓名”这一列为固定显示状态,即使当用户横向滑动查看其他科目分数时,“姓名”一栏始终保持可见。 #### 自定义样式增强表现力 除了借助第三方库外,还可以通过给特定 `<th>` 或者 `<td>` 元素应用 className 属性来增加额外的 CSS 类名,进而调整其外观属性比如背景颜色、字体大小等,以此满足更加个性化的界面设计要求[^2]。 #### 参考 HBuilder MUI 解决方案 对于追求更高性能的应用场景而言,也可以考虑基于 HBuilder 提供的基础框架进行二次开发。具体来说就是引入官方文档提到的技术手段,即通过加载预编译好的 JavaScript 文件到 HTML 文档中去达成目的。这种方法的优势在于可以直接借用已经过测试验证过的成熟解决方案,减少自行调试的时间成本[^3]。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

花里梦雨

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值