主题
LimeTable 表格组件
一个功能丰富的表格组件，用于展示结构化数据。支持边框、条纹、固定表头、固定列、多级表头、合并单元格等多种配置，可用于数据展示、信息对比、统计分析等多种场景。组件提供了丰富的自定义选项，可以满足各种复杂的数据展示需求。
插件依赖：
lime-shared、lime-style
文档链接
📚 组件详细文档请访问以下站点：
安装方法
- 在uni-app
中搜索并导入
lime-table - 导入后可能需要重新编译项目
- 在页面中使用
l-table、l-tr和l-td组件
代码演示
基础使用
通过嵌套 Flex 布局构建实现的表格，l-tr表示一行，l-td表示单元格。
html
<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给表格单元格设置边框
html
<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给表格单元格设置下边框
html
<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设置样式达到条纹效果
html
<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 属性实现等比列宽分配，支持两种格式
同一列的单元格需统一使用带单位或不带单位格式
html
<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 属性锁定表头行，需配合容器高度使用：
html
<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端限制
- 固定列可能出现定位偏移
- 滚动时可能出现闪动
html
<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>多级表头
通过嵌套表格结构实现多级表头
html
<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：
跨列合并 = 容器宽度 = 子列宽度总和
跨行合并 = 垂直堆叠 + 等高布局
使用嵌套表格结构实现复合合并
html
<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>快速预览
导入插件后，可以直接使用以下标签查看演示效果：
html
<!-- 代码位于 uni_modules/lime-table/components/lime-table -->
<lime-table />插件标签说明
| 标签名 | 说明 |
|---|---|
l-table | 表格容器组件标签 |
l-tr | 表格行组件标签 |
l-td | 表格单元格组件标签 |
lime-table | 演示标签 |
Vue2使用说明
main.js中添加以下代码：
js
// vue2项目中使用
import Vue from 'vue'
import VueCompositionAPI from '@vue/composition-api'
Vue.use(VueCompositionAPI)详细配置请参考官方文档：Vue Composition API
API文档
Table Props 属性说明
| 属性名 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| bordered | 是否显示表格边框线 | boolean | false |
| underline | 是否显示行下划线 | boolean | false |
| height | 表格容器高度 | string | - |
| borderColor | 自定义边框颜色 | string | - |
| lClass | 自定义类名 | string | - |
| lStyle | 自定义样式 | string | object | - |
Tr Props 属性说明
| 属性名 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| fixed | 行固定模式 | boolean | false |
| lClass | 自定义行容器类名 | string | - |
| lStyle | 自定义行容器样式 | string | object | - |
Td Props 属性说明
| 属性名 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| width | 列宽（可选单位） | string | - |
| fixed | 列固定模式 | boolean | 'left' | 'right' | false |
| lClass | 自定义单元格类名 | string | - |
| lStyle | 自定义单元格样式 | string | object | - |
Table Events 事件
| 事件名 | 说明 | 回调参数 |
|---|---|---|
| scrolltoupper | 滚动到顶部时触发 | event: UniScrollToUpperEvent |
| scrolltolower | 滚动到底部时触发 | event: UniScrollToLowerEvent |
| scroll | 滚动过程中持续触发 | event: UniScrollEvent |
主题定制
组件提供了以下CSS变量，可用于自定义样式：
| 变量名称 | 默认值 | 描述 |
|---|---|---|
--l-table-bg-color | $bg-color-container | 表格背景色 |
--l-table-border-color | $border-color-2 | 表格边框颜色 |
--l-table-font-weight | bold | 表头文字加粗 |
--l-table-td-fixed-bg-color | $bg-color-container | 固定列单元格背景色 |
--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 | $bg-color-container | 固定行背景色 |
--l-table-td-bg-color | transparent | 单元格背景色 |
--l-table-tr-bg-color | transparent | 行背景色 |
支持与赞赏
如果你觉得本插件解决了你的问题，可以考虑支持作者：
| 支付宝赞助 | 微信赞助 |
|---|---|
 |  |