更新记录

1.0.1(2021-03-14)

新增表格的跨行能力

1.0.0(2020-12-21)

第一个版本


平台兼容性

Vue2 Vue3
×
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 需要多列显示的容器

友情提示:

  1. 当前项目源码使用了 ES6 和 scss 请添加运行依赖
  2. [插件ZIP]只包含模板文件和数据文件,不包含项目运行依赖(如 pages.json)
  3. [示例项目ZIP]是完整的项目文件,可下载后导入 HBuilderX 中直接运行体验
  4. 文件下载在当前页面的上部靠右位置,有 [下载插件ZIP] [下载示例项目ZIP] 按钮,点击即可下载

隐私、权限声明

1. 本插件需要申请的系统权限列表:

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明:

3. 本插件是否包含广告,如包含需详细说明广告表达方式、展示频率:

许可协议

MIT协议

使用中有什么不明白的地方,就向插件作者提问吧~ 我要提问