LimeUI+1.0.0

主题

LimeTable 表格 ​

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

文档 ​

table

安装 ​

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

代码演示 ​

基础使用 ​

通过嵌套 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/compoents/lime-table -->
<lime-table />

插件标签 ​

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

关于vue2的使用方式 ​

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

API ​

Table Props ​

参数说明类型默认值
bordered是否显示表格边框线booleanfalse
underline是否显示行下划线booleanfalse
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-colorwhite表格整体背景色
--l-table-border-color$border-color-2表格边框颜色
--l-table-font-weightbold表头文字加粗
--l-table-td-fixed-bg-colorwhite固定列单元格背景色
--l-table-fixed-left-shadowinset 10px 0 10px -10px rgba(0,0,0,0.15)左侧固定列阴影效果
--l-table-fixed-right-shadowinset -10px 0 10px -10px rgba(0,0,0,0.15)右侧固定列阴影效果
--l-table-tr-fixed-bg-colorwhite固定行背景色

打赏 ​

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

源代码 ​

组件源码