uview-plus 3.7.0 → 3.7.28

package/components/u-table2/u-table2.vue

@@ -28,47 +28,83 @@
                 </view>
             </view>
 
-            <!-- 表体 -->
-            <view class="u-table-body" :style="{ minWidth: scrollWidth, maxHeight: maxHeight ? maxHeight + 'px' : 'none' }">
-                <template v-if="data && data.length > 0">
-                    <table-row 
-                        v-for="(row, rowIndex) in sortedData"
-                        :key="row[rowKey] || rowIndex"
-                        :row="row" 
-                        :rowIndex="rowIndex"
-                        :parent-row="null"
-                        :columns="columns"
-                        :tree-props="treeProps"
-                        :row-key="rowKey"
-                        :expanded-keys="expandedKeys"
-                        :cell-style-inner="cellStyleInner"
-                        :is-expanded="isExpanded"
-                        :row-class-name="rowClassName"
-                        :stripe="stripe"
-                        :cell-class-name="cellClassName"
-                        :get-fixed-class="getFixedClass"
-                        :highlight-current-row="highlightCurrentRow"
-                        :current-row="currentRow"
-                        :handle-row-click="handleRowClick"
-                        :toggle-expand="toggleExpand"
-                        :level="1"
-                        :rowHeight="rowHeight"
-                        :hasTree="hasTree"
-                        :selectedRows="selectedRows"
-                        :expandWidth="expandWidth"
-                        :computedMainCol="computedMainCol"
-                        :span-method="spanMethod"
-                        @toggle-select="toggleSelect"
-                        @row-click="handleRowClick"
-                        @toggle-expand="toggleExpand"
-                    >
-                        <template v-slot:cellChild="scope">
-                            <slot name="cell" :row="scope.row" :column="scope.column" :prow="scope.prow"
-                                :rowIndex="scope.rowIndex" :columnIndex="scope.columnIndex" :level="scope.level">
-                            </slot>                      
-                        </template>
-                    </table-row>
-                </template>
+            <!-- 表体 -->
+            <view class="u-table-body" :style="{ minWidth: scrollWidth, maxHeight: maxHeight ? maxHeight + 'px' : 'none' }">
+                <template v-if="data && data.length > 0">
+                    <!-- #ifdef MP-WEIXIN -->
+                    <template v-for="(item, flatIndex) in flattenedSortedData" :key="item.row[rowKey] || flatIndex">
+                        <view class="u-table-row u-table-row-child" :class="[highlightCurrentRow && currentRow === item.row ? 'u-table-row-highlight' : '',
+                            rowClassName ? rowClassName(item.row, item.rowIndex) : '',
+                            stripe && flatIndex % 2 === 1 ? 'u-table-row-zebra' : ''
+                        ]" :style="{ height: rowHeight }" @click="handleRowClick(item.row)">
+                            <view v-for="(col, colIndex) in columns" :key="col.key" class="u-table-cell"
+                                :class="[col.align ? 'u-text-' + col.align : '',
+                                    cellClassName ? cellClassName(item.row, col) : '',
+                                    getFixedClass(col),
+                                    getCellSpanClass(item.row, col, item.rowIndex, colIndex)
+                                ]"
+                                :style="[cellStyleInner({ row: item.row, column: col, rowIndex: item.rowIndex, columnIndex: colIndex, level: item.level }), getCellSpanStyle(item.row, col, item.rowIndex, colIndex)]">
+                                <view v-if="col.type === 'selection'">
+                                    <checkbox :checked="isSelected(item.row)" @click.stop="toggleSelect(item.row)" />
+                                </view>
+                                <template v-else>
+                                    <view v-if="col.key === computedMainCol && hasTree" @click.stop="toggleExpand(item.row)"
+                                        :style="{ width: expandWidth }">
+                                        <view v-if="item.row[treeProps.children] && item.row[treeProps.children].length > 0">
+                                            {{ isExpanded(item.row) ? '▼' : '▶' }}
+                                        </view>
+                                    </view>
+                                    <slot name="cell" :row="item.row" :column="col" :prow="item.parentRow"
+                                        :rowIndex="item.rowIndex" :columnIndex="colIndex" :level="item.level">
+                                        <view class="u-table-cell_content">
+                                            {{ item.row[col.key] }}
+                                        </view>
+                                    </slot>
+                                </template>
+                            </view>
+                        </view>
+                    </template>
+                    <!-- #endif -->
+                    <!-- #ifndef MP-WEIXIN -->
+                    <table-row 
+                        v-for="(row, rowIndex) in sortedData"
+                        :key="row[rowKey] || rowIndex"
+                        :row="row" 
+                        :rowIndex="rowIndex"
+                        :parent-row="null"
+                        :columns="columns"
+                        :tree-props="treeProps"
+                        :row-key="rowKey"
+                        :expanded-keys="expandedKeys"
+                        :cell-style-inner="cellStyleInner"
+                        :is-expanded="isExpanded"
+                        :row-class-name="rowClassName"
+                        :stripe="stripe"
+                        :cell-class-name="cellClassName"
+                        :get-fixed-class="getFixedClass"
+                        :highlight-current-row="highlightCurrentRow"
+                        :current-row="currentRow"
+                        :handle-row-click="handleRowClick"
+                        :toggle-expand="toggleExpand"
+                        :level="1"
+                        :rowHeight="rowHeight"
+                        :hasTree="hasTree"
+                        :selectedRows="selectedRows"
+                        :expandWidth="expandWidth"
+                        :computedMainCol="computedMainCol"
+                        :span-method="spanMethod"
+                        @toggle-select="toggleSelect"
+                        @row-click="handleRowClick"
+                        @toggle-expand="toggleExpand"
+                    >
+                        <template v-slot:cellChild="scope">
+                            <slot name="cell" :row="scope.row" :column="scope.column" :prow="scope.prow"
+                                :rowIndex="scope.rowIndex" :columnIndex="scope.columnIndex" :level="scope.level">
+                            </slot>                      
+                        </template>
+                    </table-row>
+                    <!-- #endif -->
+                </template>
                 <template v-else>
                     <slot name="empty">
                     </slot>
@@ -103,49 +139,85 @@
                 </view>
             </view>
 
-            <!-- 表体 -->
-            <view class="u-table-body" :style="{ minWidth: scrollWidth, maxHeight: maxHeight ? maxHeight + 'px' : 'none' }">
-                <template v-if="data && data.length > 0">
-                    <template v-for="(row, rowIndex) in sortedData" :key="row[rowKey] || rowIndex">
-                        <!-- 子级渲染 (递归组件) -->
-                        <table-row 
-                            :row="row" 
-                            :rowIndex="rowIndex"
-                            :parent-row="null"
-                            :columns="visibleFixedLeftColumns"
-                            :tree-props="treeProps"
-                            :row-key="rowKey"
-                            :expanded-keys="expandedKeys"
-                            :cell-style-inner="cellStyleInner"
-                            :is-expanded="isExpanded"
-                            :row-class-name="rowClassName"
-                            :stripe="stripe"
-                            :cell-class-name="cellClassName"
-                            :get-fixed-class="getFixedClass"
-                            :highlight-current-row="highlightCurrentRow"
-                            :current-row="currentRow"
-                            :handle-row-click="handleRowClick"
-                            :toggle-expand="toggleExpand"
-                            :level="1"
-                            :rowHeight="rowHeight"
-                            :hasTree="hasTree"
-                            :selectedRows="selectedRows"
-                            :expandWidth="expandWidth"
-                            :computedMainCol="computedMainCol"
-                            :span-method="spanMethod"
-                            @toggle-select="toggleSelect"
-                            @row-click="handleRowClick"
-                            @toggle-expand="toggleExpand"
-                        >
-                            <template v-slot:cellChild="scope">
-                                <slot name="cell" :row="scope.row" :column="scope.column" :prow="scope.prow"
-                                    :rowIndex="scope.rowIndex" :columnIndex="scope.columnIndex" :level="scope.level">
-                                </slot>                      
-                            </template>
-                        </table-row>
-                    </template>
-                </template>
-            </view>
+            <!-- 表体 -->
+            <view class="u-table-body" :style="{ minWidth: scrollWidth, maxHeight: maxHeight ? maxHeight + 'px' : 'none' }">
+                <template v-if="data && data.length > 0">
+                    <!-- #ifdef MP-WEIXIN -->
+                    <template v-for="(item, flatIndex) in flattenedSortedData" :key="item.row[rowKey] || flatIndex">
+                        <view class="u-table-row u-table-row-child" :class="[highlightCurrentRow && currentRow === item.row ? 'u-table-row-highlight' : '',
+                            rowClassName ? rowClassName(item.row, item.rowIndex) : '',
+                            stripe && flatIndex % 2 === 1 ? 'u-table-row-zebra' : ''
+                        ]" :style="{ height: rowHeight }" @click="handleRowClick(item.row)">
+                            <view v-for="(col, colIndex) in visibleFixedLeftColumns" :key="col.key" class="u-table-cell"
+                                :class="[col.align ? 'u-text-' + col.align : '',
+                                    cellClassName ? cellClassName(item.row, col) : '',
+                                    getFixedClass(col),
+                                    getCellSpanClass(item.row, col, item.rowIndex, colIndex)
+                                ]"
+                                :style="[cellStyleInner({ row: item.row, column: col, rowIndex: item.rowIndex, columnIndex: colIndex, level: item.level }), getCellSpanStyle(item.row, col, item.rowIndex, colIndex)]">
+                                <view v-if="col.type === 'selection'">
+                                    <checkbox :checked="isSelected(item.row)" @click.stop="toggleSelect(item.row)" />
+                                </view>
+                                <template v-else>
+                                    <view v-if="col.key === computedMainCol && hasTree" @click.stop="toggleExpand(item.row)"
+                                        :style="{ width: expandWidth }">
+                                        <view v-if="item.row[treeProps.children] && item.row[treeProps.children].length > 0">
+                                            {{ isExpanded(item.row) ? '▼' : '▶' }}
+                                        </view>
+                                    </view>
+                                    <slot name="cell" :row="item.row" :column="col" :prow="item.parentRow"
+                                        :rowIndex="item.rowIndex" :columnIndex="colIndex" :level="item.level">
+                                        <view class="u-table-cell_content">
+                                            {{ item.row[col.key] }}
+                                        </view>
+                                    </slot>
+                                </template>
+                            </view>
+                        </view>
+                    </template>
+                    <!-- #endif -->
+                    <!-- #ifndef MP-WEIXIN -->
+                    <template v-for="(row, rowIndex) in sortedData" :key="row[rowKey] || rowIndex">
+                        <!-- 子级渲染 (递归组件) -->
+                        <table-row 
+                            :row="row" 
+                            :rowIndex="rowIndex"
+                            :parent-row="null"
+                            :columns="visibleFixedLeftColumns"
+                            :tree-props="treeProps"
+                            :row-key="rowKey"
+                            :expanded-keys="expandedKeys"
+                            :cell-style-inner="cellStyleInner"
+                            :is-expanded="isExpanded"
+                            :row-class-name="rowClassName"
+                            :stripe="stripe"
+                            :cell-class-name="cellClassName"
+                            :get-fixed-class="getFixedClass"
+                            :highlight-current-row="highlightCurrentRow"
+                            :current-row="currentRow"
+                            :handle-row-click="handleRowClick"
+                            :toggle-expand="toggleExpand"
+                            :level="1"
+                            :rowHeight="rowHeight"
+                            :hasTree="hasTree"
+                            :selectedRows="selectedRows"
+                            :expandWidth="expandWidth"
+                            :computedMainCol="computedMainCol"
+                            :span-method="spanMethod"
+                            @toggle-select="toggleSelect"
+                            @row-click="handleRowClick"
+                            @toggle-expand="toggleExpand"
+                        >
+                            <template v-slot:cellChild="scope">
+                                <slot name="cell" :row="scope.row" :column="scope.column" :prow="scope.prow"
+                                    :rowIndex="scope.rowIndex" :columnIndex="scope.columnIndex" :level="scope.level">
+                                </slot>                      
+                            </template>
+                        </table-row>
+                    </template>
+                    <!-- #endif -->
+                </template>
+            </view>
         </view>
     </view>
 </template>
@@ -357,10 +429,10 @@ export default {
                 });
             });
         },
-        sortedData() {
-            if (!this.sortConditions.length) return this.filteredData;
-
-            const data = [...this.filteredData];
+        sortedData() {
+            if (!this.sortConditions.length) return this.filteredData;
+
+            const data = [...this.filteredData];
 
             return data.sort((a, b) => {
                 for (const condition of this.sortConditions) {
@@ -376,14 +448,32 @@ export default {
                     if (valA < valB) return order === 'ascending' ? -1 : 1;
                     if (valA > valB) return order === 'ascending' ? 1 : -1;
                 }
-                return 0;
-            });
-        },
-        // 计算当前应该显示的固定左侧列
-        visibleFixedLeftColumns() {
-            if (this.scrollLeft <= 0) {
-                return [];
-            }
+                return 0;
+            });
+        },
+        flattenedSortedData() {
+            const result = [];
+            const childrenKey = this.treeProps.children;
+
+            const walk = (rows, parentRow = null, level = 1) => {
+                if (!Array.isArray(rows) || rows.length === 0) return;
+                rows.forEach((row, rowIndex) => {
+                    result.push({ row, parentRow, level, rowIndex });
+                    const children = row && row[childrenKey];
+                    if (children && children.length > 0 && this.isExpanded(row)) {
+                        walk(children, row, level + 1);
+                    }
+                });
+            };
+
+            walk(this.sortedData);
+            return result;
+        },
+        // 计算当前应该显示的固定左侧列
+        visibleFixedLeftColumns() {
+            if (this.scrollLeft <= 0) {
+                return [];
+            }
             
             let totalWidth = 0;
             let fixedWidth = 0;
@@ -441,13 +531,71 @@ export default {
             deep: true,
             immediate: false
         }
-    },
-    methods: {
-        addUnit,
-        onScroll(e) {
-            this.scrollLeft = e.detail.scrollLeft;
-            // 获取所有左侧固定列
-            this.fixedLeftColumns = this.columns.filter(col => col.fixed === 'left');
+    },
+    methods: {
+        addUnit,
+        isSelected(row) {
+            return this.selectedRows.some(r => r[this.rowKey] === row[this.rowKey]);
+        },
+        getCellSpan(row, column, rowIndex, columnIndex) {
+            if (typeof this.spanMethod !== 'function') {
+                return { rowspan: 1, colspan: 1 };
+            }
+
+            const result = this.spanMethod({
+                row,
+                column,
+                rowIndex,
+                columnIndex
+            });
+
+            if (Array.isArray(result)) {
+                const [rowspan, colspan] = result;
+                return { rowspan: rowspan != null ? rowspan : 1, colspan: colspan != null ? colspan : 1 };
+            }
+
+            if (result && typeof result === 'object') {
+                const { rowspan, colspan } = result;
+                return { rowspan: rowspan != null ? rowspan : 1, colspan: colspan != null ? colspan : 1 };
+            }
+
+            return { rowspan: 1, colspan: 1 };
+        },
+        getCellSpanClass(row, column, rowIndex, columnIndex) {
+            const span = this.getCellSpan(row, column, rowIndex, columnIndex);
+            if (span.rowspan === 0 || span.colspan === 0) {
+                return 'u-table-cell-hidden';
+            }
+            if (span.rowspan > 1 || span.colspan > 1) {
+                return 'u-table-cell-merged';
+            }
+            return '';
+        },
+        getCellSpanStyle(row, column, rowIndex, columnIndex) {
+            const span = this.getCellSpan(row, column, rowIndex, columnIndex);
+            const style = {};
+
+            if (span.rowspan > 1) {
+                const currentHeight = parseInt(this.rowHeight);
+                if (!isNaN(currentHeight)) {
+                    style.height = `${span.rowspan * currentHeight}px`;
+                }
+            }
+
+            if (span.colspan > 1) {
+                style.flex = span.colspan;
+            }
+
+            if (span.rowspan === 0 || span.colspan === 0) {
+                style.display = 'none';
+            }
+
+            return style;
+        },
+        onScroll(e) {
+            this.scrollLeft = e.detail.scrollLeft;
+            // 获取所有左侧固定列
+            this.fixedLeftColumns = this.columns.filter(col => col.fixed === 'left');
             // 计算是否需要显示固定列阴影
             if (this.fixedLeftColumns.length > 0) {
                 this.showFixedColumnShadow = this.scrollLeft > 0;
@@ -716,12 +864,20 @@ export default {
         background-color: #f5f7fa;
     }
 
-    .u-table-empty {
-        text-align: center;
-        padding: 20px;
-        color: #999;
-    }
-}
+    .u-table-empty {
+        text-align: center;
+        padding: 20px;
+        color: #999;
+    }
+
+    .u-table-cell-hidden {
+        opacity: 0;
+    }
+
+    .u-table-cell-merged {
+        z-index: 1;
+    }
+}
 
 // 固定列浮动视图
 .u-table-fixed-shadow {
@@ -753,4 +909,4 @@ export default {
         border-right: none;
     }
 }
-</style>
+</style>