更新记录

0.0.1（2025-03-03）

  • init

平台兼容性

Vue2 Vue3
× √
App 快应用 微信小程序 支付宝小程序 百度小程序 字节小程序 QQ小程序
HBuilderX 4.53 app-vue app-uvue × √ × × × ×
钉钉小程序 快手小程序 飞书小程序 京东小程序 鸿蒙元服务
× × × × ×
H5-Safari Android Browser 微信浏览器(Android) QQ浏览器(Android) Chrome IE Edge Firefox PC-Safari
√ √ √ √ √ × × × ×

lime-table 表格

  • 用于展示多条结构类似的数据
  • 插件依赖lime-style,lime-shared不喜勿下

文档

table

安装

插件市场导入即可，首次导入可能需要重新编译

代码演示

基础使用

通过嵌套 Flex 布局构建实现的表格，l-tr表示一行，l-td表示单元格。

<l-table>
    <!-- 表头 -->
    <l-tr style="background-color: #f5f5f5;">
        <l-td><text class="cell">ID</text></l-td>
        <l-td><text class="cell">姓名</text></l-td>
        <l-td><text class="cell">城市</text></l-td>
    </l-tr>
    <!-- 数据结构 -->
    <l-tr>
        <l-td><text class="cell">1</text></l-td>
        <l-td><text class="cell">张三</text></l-td>
        <l-td><text class="cell">广州</text></l-td>
    </l-tr>
    <l-tr>
        <l-td><text class="cell">2</text></l-td>
        <l-td><text class="cell">李四</text></l-td>
        <l-td><text class="cell">深圳</text></l-td>
    </l-tr>
</l-table>

边框

通过bordered给表格单元格设置边框

<l-table bordered>
    <!-- 表头 -->
    <l-tr style="background-color: #f5f5f5;">
        <l-td><text class="cell">ID</text></l-td>
        <l-td><text class="cell">姓名</text></l-td>
        <l-td><text class="cell">城市</text></l-td>
    </l-tr>
    <!-- 数据结构 -->
    <l-tr>
        <l-td><text class="cell">1</text></l-td>
        <l-td><text class="cell">张三</text></l-td>
        <l-td><text class="cell">广州</text></l-td>
    </l-tr>
    <l-tr>
        <l-td><text class="cell">2</text></l-td>
        <l-td><text class="cell">李四</text></l-td>
        <l-td><text class="cell">深圳</text></l-td>
    </l-tr>
</l-table>

下边框

通过underline给表格单元格设置下边框

<l-table underline>
    <!-- 表头 -->
    <l-tr style="background-color: #f5f5f5;">
        <l-td><text class="cell">ID</text></l-td>
        <l-td><text class="cell">姓名</text></l-td>
        <l-td><text class="cell">城市</text></l-td>
    </l-tr>
    <!-- 数据结构 -->
    <l-tr>
        <l-td><text class="cell">1</text></l-td>
        <l-td><text class="cell">张三</text></l-td>
        <l-td><text class="cell">广州</text></l-td>
    </l-tr>
    <l-tr>
        <l-td><text class="cell">2</text></l-td>
        <l-td><text class="cell">李四</text></l-td>
        <l-td><text class="cell">深圳</text></l-td>
    </l-tr>
</l-table>

条纹

可以自由的给l-tr设置样式达到条纹效果

<l-table>
    <l-tr>
        <l-td><text class="cell" style="font-weight: bold;">ID</text></l-td>
        <l-td><text class="cell" style="font-weight: bold;">姓名</text></l-td>
        <l-td><text class="cell" style="font-weight: bold;">城市</text></l-td>
    </l-tr>
    <l-tr style="background: #f5f5f5; border-radius: 8rpx;">
        <l-td><text class="cell">1</text></l-td>
        <l-td><text class="cell">张三</text></l-td>
        <l-td><text class="cell">广州</text></l-td>
    </l-tr>

    <l-tr style="border-radius: 8rpx;">
        <l-td><text class="cell">2</text></l-td>
        <l-td><text class="cell">李四</text></l-td>
        <l-td><text class="cell">深圳</text></l-td>
    </l-tr>

    <l-tr style="background: #f5f5f5; border-radius: 8rpx;">
        <l-td><text class="cell">3</text></l-td>
        <l-td><text class="cell">王五</text></l-td>
        <l-td><text class="cell">北京</text></l-td>
    </l-tr>
</l-table>

自定义宽度

通过 width 属性实现等比列宽分配，支持两种格式
同一列的单元格需统一使用带单位或不带单位格式

<l-table>
    <l-tr style="background-color: #f5f5f5;">
        <l-td width="2"><text class="cell">ID</text></l-td>
        <l-td width="2"> <text class="cell">姓名</text></l-td>
        <l-td width="3"> <text class="cell">城市</text></l-td>
    </l-tr>
    <l-tr>
        <l-td width="2"><text class="cell">1001</text></l-td>
        <l-td width="2"><text class="cell">王小明</text></l-td>
        <l-td width="3"><text class="cell">上海</text> </l-td>
    </l-tr>
</l-table>

<l-table>
    <l-tr style="background-color: #f5f5f5;">
        <l-td width="100rpx"><text class="cell">ID</text></l-td>
        <l-td width="100rpx"> <text class="cell">姓名</text></l-td>
        <l-td width="300rpx"> <text class="cell">城市</text></l-td>
    </l-tr>
    <l-tr>
        <l-td width="100rpx"><text class="cell">1001</text></l-td>
        <l-td width="100rpx"><text class="cell">王小明</text></l-td>
        <l-td width="300rpx"><text class="cell">上海</text> </l-td>
    </l-tr>
</l-table>

固定表头

通过 fixed 属性锁定表头行，需配合容器高度使用：

<l-table height="400rpx">
    <l-tr fixed>
        <l-td width="100rpx"><text class="cell">ID</text></l-td>
        <l-td width="150rpx"><text class="cell">姓名</text></l-td>
        <l-td width="300rpx"><text class="cell">所属部门</text></l-td>
    </l-tr>

    <l-tr v-for="item in 10" :key="item">
        <l-td width="100rpx"><text class="cell">21001</text></l-td>
        <l-td width="150rpx"><text class="cell">张伟</text></l-td>
        <l-td width="300rpx"><text class="cell">技术研发中心</text></l-td>
    </l-tr>
</l-table>

固定表头和列

给l-tr或l-td设置fixed, 通过组合属性实现多向固定

❗️ ​uniappx app端限制

  • 固定列可能出现定位偏移
  • 滚动时可能出现闪动
<l-table height="400rpx">
    <!-- 固定表头行 -->
    <l-tr fixed>
        <l-td bold width="120rpx" fixed><text class="cell">ID</text></l-td>
        <l-td bold width="250rpx"><text class="cell">日期</text></l-td>
        <l-td bold width="120rpx"><text class="cell">姓名</text></l-td>
        <l-td bold width="320rpx"><text class="cell">邮箱</text></l-td>
        <l-td bold width="360rpx"><text class="cell">详细地址</text></l-td>
        <l-td bold fixed="right" width="140rpx"><text class="cell">操作</text></l-td>
    </l-tr>

    <l-tr v-for="item in 10" :key="item">
        <l-td fixed width="120rpx"><text class="cell">1001</text></l-td> <!-- 同步左侧固定 -->
        <l-td width="250rpx"><text class="cell">2024-03-01</text></l-td>
        <l-td width="120rpx"><text class="cell">张三</text></l-td>
        <l-td width="320rpx"><text class="cell">zhangsan@example.com</text></l-td>
        <l-td width="360rpx"><text class="cell">北京市朝阳区建国路88号</text></l-td>
        <l-td fixed="right" width="140rpx"> <!-- 同步右侧固定 -->
            <button style="font-size:10px;padding:0 8rpx; margin:10px" size="mini" type="primary">编辑</button>
        </l-td>
    </l-tr>
</l-table>

多级表头

通过嵌套表格结构实现多级表头

<l-table bordered height="700rpx">
    <l-tr fixed style="background-color: #f5f5f5;">
        <l-td width="120rpx"><text class="cell">ID</text></l-td>
        <l-td width="210rpx"><text class="cell">日期</text></l-td>
        <l-td width="840rpx">
             <!-- 多级嵌套结构 总宽度840rpx -->
            <l-tr>
                <l-td><text class="cell">收货地址</text></l-td>
            </l-tr>
            <l-tr>
                <l-td width="140rpx"> <text class="cell">收件人</text></l-td>
                <l-td width="700rpx">
                     <!-- 多级嵌套结构 总宽度700rpx -->
                    <l-tr>
                        <l-td><text class="cell">详细信息</text> </l-td>
                    </l-tr>
                    <l-tr>
                        <l-td width="200rpx"><text class="cell">城市</text></l-td>
                        <l-td width="200rpx"> <text class="cell">联系电话</text></l-td>
                        <l-td width="300rpx"><text class="cell">详细地址</text> </l-td>
                    </l-tr>
                </l-td>
            </l-tr>
        </l-td>
        <l-td fixed="right" width="120rpx">
            <text class="cell">操作</text>
        </l-td>
    </l-tr>

    <l-tr v-for="(item) in 21" :key="item">
        <l-td width="120rpx"><text class="cell">1001</text></l-td>
        <l-td width="210rpx"><text class="cell">2024-03-05</text></l-td>
        <l-td :width="840rpx">
            <l-tr>
                <l-td width="140rpx"><text class="cell">张三</text></l-td>
                <l-td :width="700rpx">
                    <l-tr>
                        <l-td width="200rpx"><text class="cell">杭州市</text></l-td>
                        <l-td width="200rpx"><text class="cell">138-1234-5678</text></l-td>
                        <l-td :width="300rpx"><text class="cell">滨江区网商路699号</text></l-td>
                    </l-tr>
                </l-td>
            </l-tr>
        </l-td>
        <l-td fixed="right" width="120rpx">
            <button style="font-size:10px;padding:0 8rpx; margin:10px" size="mini" type="primary">编辑</button>
        </l-td>
    </l-tr>
</l-table>

合并行或列

采用Flex布局实现行列合并，通过以下核心机制替代传统表格的rowspan/colspan：

📏 跨列合并 = 容器宽度 = 子列宽度总和
📐 跨行合并 = 垂直堆叠 + 等高布局
🧩 使用嵌套表格结构实现复合合并 

<l-table bordered>
    <l-tr>
        <l-td width="360rpx">
            <l-tr>
                <l-td width="80rpx"><text class="cell">工号</text></l-td>
                <l-td width="100rpx"><text class="cell">E2109</text></l-td>
                <l-td width="80rpx"><text class="cell">部门</text></l-td>
                <l-td width="100rpx"><text class="cell">技术部</text></l-td>
            </l-tr>
            <l-tr>
                <l-td width="80rpx"><text class="cell">职位</text></l-td>
                <l-td width="100rpx"><text class="cell">前端工程师</text></l-td>
                <l-td width="80rpx"><text class="cell">入职</text></l-td>
                <l-td width="100rpx"><text class="cell">2022-08</text></l-td>
            </l-tr>
            <l-tr>
                <l-td width="80rpx"><text class="cell">邮箱</text></l-td>
                <l-td width="280rpx"><text class="cell">wangyx@tech.com</text></l-td>
            </l-tr>
        </l-td>
        <l-td width="100rpx">
            <text class="cell avatar-cell">
                <image src="/static/logo.png" style="width:100%" mode="widthFix" />
            </text>
        </l-td>
    </l-tr>

    <l-tr>
        <l-td width="80rpx"><text class="cell">项目经验</text></l-td>
        <l-td width="380rpx">
            <text class="cell">
                主导企业级数据可视化平台开发，使用Vue3+TypeScript重构核心模块，优化首屏加载速度至1.2秒内。完成3个百万级用户项目的架构设计。
            </text>
        </l-td>
    </l-tr>
</l-table>

查看示例

  • 导入后直接使用这个标签查看演示效果
<!-- // 代码位于 uni_modules/lime-table/compoents/lime-table -->
<lime-table />

插件标签

  • 默认 l-table 为 component
  • 默认 lime-table 为 demo

关于vue2的使用方式

  • 插件使用了composition-api, 如果你希望在vue2中使用请按官方的教程vue-composition-api配置
  • 关键代码是: 在main.js中 在vue2部分加上这一段即可 
    // vue2
import Vue from 'vue'
import VueCompositionAPI from '@vue/composition-api'
Vue.use(VueCompositionAPI)

API

Table Props

参数 说明 类型 默认值
bordered 是否显示表格边框线 boolean false
underline 是否显示行下划线 boolean false
height 表格容器高度 string -
borderColor 自定义边框颜色 string -

Tr Props

参数 说明 类型 默认值
fixed 行固定模式 boolean -
lClass 自定义行容器类名 string -
lStyle 自定义行容器样式 any -

Td Props

参数 说明 类型 默认值
width 列宽（可选单位） string -
fixed 列固定模式 boolean \| 'left' \| 'right' false
lClass 自定义单元格类名 string -
lStyle 自定义单元格样式 any -

Table Events

事件名 说明 回调参数
scrolltoupper 滚动到顶部时触发 (event: UniScrollToUpperEvent) => void
scrolltolower 滚动到底部时触发 (event: UniScrollToLowerEvent) => void
scroll 滚动过程中持续触发 (event: UniScrollEvent) => void

主题定制

样式变量

组件提供了下列 CSS 变量，可用于自定义样式，uvue app无效。

名称 默认值 描述
--l-table-bg-color white 表格整体背景色
--l-table-border-color $border-color-2 表格边框颜色
--l-table-font-weight bold 表头文字加粗
--l-table-td-fixed-bg-color white 固定列单元格背景色
--l-table-fixed-left-shadow inset 10px 0 10px -10px rgba(0,0,0,0.15) 左侧固定列阴影效果
--l-table-fixed-right-shadow inset -10px 0 10px -10px rgba(0,0,0,0.15) 右侧固定列阴影效果
--l-table-tr-fixed-bg-color white 固定行背景色

打赏

如果你觉得本插件，解决了你的问题，赠人玫瑰，手留余香。

隐私、权限声明

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

无

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

无

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

无

评论列表 撰写评论 向官方投诉

暂无用户评论。

插件问答 我要提问

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

加载更多...