更新记录
1.0.1(2021-03-14)
下载此版本
新增表格的跨行能力
1.0.0(2020-12-21)
下载此版本
第一个版本
平台兼容性
App |
快应用 |
微信小程序 |
支付宝小程序 |
百度小程序 |
字节小程序 |
QQ小程序 |
app-vue |
√ |
√ |
√ |
√ |
√ |
√ |
钉钉小程序 |
快手小程序 |
飞书小程序 |
京东小程序 |
鸿蒙元服务 |
× |
× |
× |
× |
× |
H5-Safari |
Android Browser |
微信浏览器(Android) |
QQ浏览器(Android) |
Chrome |
IE |
Edge |
Firefox |
PC-Safari |
√ |
√ |
√ |
√ |
√ |
√ |
√ |
√ |
√ |
表格
在 uni-app 中是没有表格组件的。虽然表格并不是移动端设计的推荐布局,但是有些数据表格使用表格会拥有更好的阅读性。
本模板只提供最基础的表格样式,不支持表头固定等其它数据表格的操作(可自行扩展)。如果你在移动端想使用表格来实现大量的交互,那么一定是你的设计方案就出现了问题,至少还从未见过大厂的应用会在移动端使用表格作为主要的功能表现形式。
scss文件引用
<style lang="scss">
@import "../../lib/helang-table.scss";
/* 不支持 scss 的项目可自行编译为 css 文件 */
</style>
表格类名结构:h-table > h-tr > h-td
表格 <table>
类名清单:
定义 |
类名 |
说明 |
表格 |
h-table |
表格整体容器 |
虚线边框 |
h-table-dashed |
表格边框线为虚线 |
主题 |
h-table-* |
可选值:首选项(primary)、成功(success)、一般信息(info)、警告(warning)、危险(danger) |
表格中的行 <tr>
类名清单:
定义 |
类名 |
说明 |
行 |
h-tr |
表格行的基本类 |
表头 |
h-thead |
用于表格头部样式 |
等比分列 |
h-tr-* |
可选值:1 ~ 6 |
表格中的单元格 <td>
类名清单:
定义 |
类名 |
说明 |
单元格 |
h-td |
表格单元格的基本类、内容默认垂直&水平居中 |
对齐 |
h-td-* |
可选值:顶部对齐(top)、底部对齐(bottom)、左边对齐(left)、右边对齐(right) |
跨列 |
h-td-colspan |
自动占满当前行剩余宽度 |
跨行 |
h-td-rowspan |
需要多列显示的容器 |
友情提示:
- 当前项目源码使用了 ES6 和 scss 请添加运行依赖
- [插件ZIP]只包含模板文件和数据文件,不包含项目运行依赖(如 pages.json)
- [示例项目ZIP]是完整的项目文件,可下载后导入 HBuilderX 中直接运行体验
- 文件下载在当前页面的上部靠右位置,有 [下载插件ZIP] [下载示例项目ZIP] 按钮,点击即可下载