From 779ea81406d42f84a275dca0934e12c831d533e2 Mon Sep 17 00:00:00 2001
From: zhengw <247276359@qq.com>
Date: Fri, 9 Jan 2026 13:59:05 +0800
Subject: [PATCH] =?UTF-8?q?feat(cf-table):=20=E6=96=B0=E5=A2=9E=E8=A1=A8?=
 =?UTF-8?q?=E6=A0=BC=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

新增 cf-table 组件，包含以下功能：
- 支持数据展示和列配置
- 提供表头和表体插槽功能
- 支持最大高度设置
- 实现粘性表头效果
- 提供空数据展示
- 包含完整的组件结构和样式
---
 .../pages/components/cf-table/cf-table.json   |  6 ++
 .../pages/components/cf-table/cf-table.ts     | 39 ++++++++++
 .../pages/components/cf-table/cf-table.wxml   | 41 +++++++++++
 .../pages/components/cf-table/cf-table.wxss   | 71 +++++++++++++++++++
 4 files changed, 157 insertions(+)
 create mode 100644 miniprogram/pages/components/cf-table/cf-table.json
 create mode 100644 miniprogram/pages/components/cf-table/cf-table.ts
 create mode 100644 miniprogram/pages/components/cf-table/cf-table.wxml
 create mode 100644 miniprogram/pages/components/cf-table/cf-table.wxss

diff --git a/miniprogram/pages/components/cf-table/cf-table.json b/miniprogram/pages/components/cf-table/cf-table.json
new file mode 100644
index 0000000..4bbe8d9
--- /dev/null
+++ b/miniprogram/pages/components/cf-table/cf-table.json
@@ -0,0 +1,6 @@
+{
+  "component": true,
+  "styleIsolation": "shared",
+  "usingComponents": {}
+}
+
diff --git a/miniprogram/pages/components/cf-table/cf-table.ts b/miniprogram/pages/components/cf-table/cf-table.ts
new file mode 100644
index 0000000..8ba9f15
--- /dev/null
+++ b/miniprogram/pages/components/cf-table/cf-table.ts
@@ -0,0 +1,39 @@
+Component({
+  options: { addGlobalClass: true, multipleSlots: true },
+  /**
+   * 组件的属性列表
+   */
+  properties: {
+    data: {
+      type: Array,
+      value: [],
+    },
+    columns: {
+      type: Array,
+      value: [],
+    },
+    maxHeight: {
+      type: String,
+      value: "auto",
+    },
+    useTheadSlot: {
+      type: Boolean,
+      value: false,
+    },
+    useTbodySlot: {
+      type: Boolean,
+      value: false,
+    },
+  },
+
+  /**
+   * 组件的初始数据
+   */
+  data: {},
+
+  /**
+   * 组件的方法列表
+   */
+  methods: {},
+});
+
diff --git a/miniprogram/pages/components/cf-table/cf-table.wxml b/miniprogram/pages/components/cf-table/cf-table.wxml
new file mode 100644
index 0000000..df8e3bf
--- /dev/null
+++ b/miniprogram/pages/components/cf-table/cf-table.wxml
@@ -0,0 +1,41 @@
+<view class="table-box" style="max-height:{{maxHeight}}">
+	<view class="table table-sticky">
+		<view class="table-column-group">
+			<block wx:for="{{columns}}" wx:key="index">
+				<view class="col" style="width: {{item.width}}" />
+			</block>
+		</view>
+		<view class="tr">
+			<block wx:if="{{useTheadSlot}}">
+				<slot name="thead" />
+			</block>
+			<block wx:else>
+				<block wx:for="{{columns}}" wx:key="index">
+					<view class="th">{{item.title}}</view>
+				</block>
+			</block>
+		</view>
+	</view>
+	<view class="table table-content">
+		<view class="table-column-group">
+			<block wx:for="{{columns}}" wx:key="index">
+				<view class="col" style="width: {{item.width}}" />
+			</block>
+		</view>
+		<block wx:if="{{useTbodySlot}}">
+			<slot name="tbody" />
+		</block>
+		<block wx:else>
+			<view wx:if="{{data.length == 0}}" class="tr" style="height: 32px" />
+			<block wx:for="{{data}}" wx:key="index" wx:for-item="record">
+				<view class="tr">
+					<block wx:for="{{columns}}" wx:key="index">
+						<view class="td">{{record[item.dataIndex]}}</view>
+					</block>
+				</view>
+			</block>
+		</block>
+	</view>
+</view>
+<view wx:if="{{!useTbodySlot && data.length == 0}}" class="empty-data">暂无数据</view>
+
diff --git a/miniprogram/pages/components/cf-table/cf-table.wxss b/miniprogram/pages/components/cf-table/cf-table.wxss
new file mode 100644
index 0000000..8d6a4fa
--- /dev/null
+++ b/miniprogram/pages/components/cf-table/cf-table.wxss
@@ -0,0 +1,71 @@
+.table-box {
+  border-left: 1px solid #ddd;
+  border-right: 1px solid #ddd;
+  border-bottom: 1px solid #ddd;
+  overflow: auto;
+}
+
+.table {
+  display: table;
+  table-layout: fixed;
+  box-sizing: border-box;
+  width: 100%;
+}
+
+.table-column-group {
+  display: table-column-group;
+}
+
+.col {
+  display: table-column;
+}
+
+.thead {
+  position: sticky;
+  top: 0;
+  z-index: 1;
+  background: #f5f5f5;
+}
+
+.tr {
+  display: table-row;
+}
+
+.th {
+  background-color: #f5f5f5;
+}
+
+.th,
+.td {
+  display: table-cell;
+  border-bottom: 1px solid #ddd;
+  padding: 4px;
+  border-right: 1px solid #ddd;
+  vertical-align: middle;
+}
+
+.tr .th {
+  border-top: 1px solid #ddd;
+}
+
+.tr .th:last-child,
+.tr .td:last-child {
+  border-right: none;
+}
+
+.table-sticky {
+  position: sticky;
+  top: 0;
+  z-index: 1;
+}
+
+.table-content .tr:last-child .td {
+  border-bottom: none;
+}
+
+.empty-data {
+  text-align: center;
+  margin-top: -33px;
+  line-height: 30px;
+  color: #999;
+}