uview-plus 3.8.49 → 3.8.86

package/components/u-table2/tableRow.vue

@@ -25,6 +25,8 @@
     display: flex;
     flex-direction: row;
     align-items: center;
+    min-width: 0;
+    box-sizing: border-box;
     padding: 10px 1px;
     font-size: 14px;
     white-space: nowrap;
@@ -47,6 +49,36 @@
     }
 }
 
+.u-table-cell_content {
+    width: 100%;
+    min-width: 0;
+    max-width: 100%;
+    flex: 1;
+    box-sizing: border-box;
+    display: block;
+    text-align: inherit;
+}
+
+.u-table-cell_text {
+    width: 100%;
+    min-width: 0;
+    max-width: 100%;
+    display: block;
+    box-sizing: border-box;
+    text-align: inherit;
+}
+
+.u-table-cell_content-overflow,
+.u-table-cell_content-overflow .u-table-cell_text {
+    width: 100%;
+    min-width: 0;
+    max-width: 100%;
+    display: block;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
 .u-table-row-zebra {
     background-color: var(--up-table2-zebra-bg-color, #fafafa);
 }
@@ -72,17 +104,18 @@
 }
 </style>
 <template>
-    <view class="u-table-row u-table-row-child"
-        :class="[highlightCurrentRow && currentRow === row ? 'u-table-row-highlight' : '',
-        rowClassName ? rowClassName(row, rowIndex) : '',
-        stripe && rowIndex % 2 === 1 ? 'u-table-row-zebra' : ''
-        ]" :style="{height: rowHeight}" @click="handleRowClick(row)">
-        <view v-for="(col, colIndex) in columns" :key="col.key" 
-            class="u-table-cell"
-            :class="[col.align ? 'u-text-' + col.align : '',
-                cellClassName ? cellClassName(row, col) : '',
-                getFixedClass(col),
-                getCellSpanClass(rowIndex, colIndex)
+    <view class="u-table-row u-table-row-child"
+        :class="[highlightCurrentRow && currentRow === row ? 'u-table-row-highlight' : '',
+        rowClassName ? rowClassName(row, rowIndex, context) : '',
+        stripe && rowIndex % 2 === 1 ? 'u-table-row-zebra' : ''
+        ]" :style="[{height: rowHeight}, getRowStyle(row, rowIndex)]" @click="handleRowClick(row)">
+        <view v-for="(col, colIndex) in columns" :key="col.key"
+            class="u-table-cell"
+            :class="[col.align ? 'u-text-' + col.align : '',
+                cellClassName ? cellClassName(row, col, context) : '',
+                getFixedClass(col),
+                isOverflowTooltipEnabled(col) ? 'u-table-cell-overflow' : '',
+                getCellSpanClass(rowIndex, colIndex)
             ]"
             :style="[cellStyleInner({row: row, column: col, rowIndex: rowIndex, columnIndex: colIndex, level: level}), getCellSpanStyle(rowIndex, colIndex)]">
                 <!-- 复选框列 -->
@@ -91,19 +124,22 @@
                         @click.stop="$emit('toggleSelect', row)" />
                 </view>
                 <template v-else>
-                    <!-- 在mainCol列显示展开图标 -->
-                    <view v-if="col.key === computedMainCol && hasTree"
-                        @click.stop="toggleExpand(row)" :style="{width: expandWidth}">
-                        <view v-if="row.children && row.children.length > 0">
-                            {{ isExpanded(row) ? '▼' : '▶' }}
-                        </view>
-                    </view>
-                    <slot name="cellChild" :row="row" :column="col" :prow="parentRow"
-                        :rowIndex="rowIndex" :columnIndex="colIndex" :level="level">
-                        <view class="u-table-cell_content">
-                            {{ row[col.key] }}
-                        </view>
-                    </slot>
+                    <!-- 在mainCol列显示展开图标 -->
+                    <view v-if="col.key === computedMainCol && hasTree"
+                        @click.stop="toggleExpand(row, level)" :style="{width: expandWidth}">
+                        <view v-if="hasExpandableChildren(row)">
+                            {{ isLazyLoading(row) ? '...' : (isExpanded(row) ? '▼' : '▶') }}
+                        </view>
+                    </view>
+                    <view class="u-table-cell_content"
+                        :class="{ 'u-table-cell_content-overflow': isOverflowTooltipEnabled(col) }">
+                        <slot name="cellChild" :row="row" :column="col" :prow="parentRow"
+                            :rowIndex="rowIndex" :columnIndex="colIndex" :level="level" :context="context">
+                            <text class="u-table-cell_text" :class="{ 'u-line-1': isOverflowTooltipEnabled(col) }" :lines="isOverflowTooltipEnabled(col) ? 1 : undefined">
+                                {{ row[col.key] }}
+                            </text>
+                        </slot>
+                    </view>
                 </template>
         </view>
     </view>
@@ -119,31 +155,39 @@
                     :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"
+                    :is-expanded="isExpanded"
+                    :row-class-name="rowClassName"
+                    :row-style="rowStyle"
+                    :stripe="stripe"
+                    :cell-class-name="cellClassName"
+                    :get-fixed-class="getFixedClass"
+                    :context="context"
+                    :highlight-current-row="highlightCurrentRow"
+                    :current-row="currentRow"
+                    :handle-row-click="handleRowClick"
                     :toggle-expand="toggleExpand"
                     :level="level + 1"
                     :rowHeight="rowHeight"
                     :hasTree="hasTree"
                     :selectedRows="selectedRows"
                     :expandWidth="expandWidth"
-                    :computed-main-col="computedMainCol"
-                    :span-method="spanMethod"
-                    @toggle-select="$emit('toggleSelect', $event)"
-                    @row-click="$emit('rowClick', $event)"
-                    @toggle-expand="$emit('toggleExpand', $event)"
+                    :computed-main-col="computedMainCol"
+                    :span-method="spanMethod"
+                    :show-overflow-tooltip="showOverflowTooltip"
+                    :has-expandable-children="hasExpandableChildren"
+                    :is-lazy-loading="isLazyLoading"
+                    @toggle-select="$emit('toggleSelect', $event)"
+                    @row-click="$emit('rowClick', $event)"
+                    @toggle-expand="$emit('toggleExpand', $event)"
                 >
-                <template v-slot:cellChild="scope">
-                    <slot name="cellChild" :row="scope.row" :column="scope.column" :prow="scope.prow"
-                        :rowIndex="scope.rowIndex" :columnIndex="scope.columnIndex" :level="level">
-                    </slot>                      
-                </template>
+                <template v-slot:cellChild="scope">
+                    <slot name="cellChild" :row="scope.row" :column="scope.column" :prow="scope.prow"
+                        :rowIndex="scope.rowIndex" :columnIndex="scope.columnIndex" :level="level" :context="context">
+                        <text class="u-table-cell_text" :class="{ 'u-line-1': isOverflowTooltipEnabled(scope.column) }" :lines="isOverflowTooltipEnabled(scope.column) ? 1 : undefined">
+                            {{ scope.row[scope.column.key] }}
+                        </text>
+                    </slot>
+                </template>
                 </table-row>
             </template>
         </template>
@@ -189,25 +233,33 @@ export default {
             type: Function,
             required: true
         },
-        rowClassName: {
-            type: Function,
-            default: null
-        },
-        stripe: {
-            type: Boolean,
-            default: false
-        },
+        rowClassName: {
+            type: Function,
+            default: null
+        },
+        rowStyle: {
+            type: [Object, Function],
+            default: () => ({})
+        },
+        stripe: {
+            type: Boolean,
+            default: false
+        },
         cellClassName: {
             type: Function,
             default: null
         },
-        getFixedClass: {
-            type: Function,
-            required: true
-        },
-        highlightCurrentRow: {
-            type: Boolean,
-            default: false
+        getFixedClass: {
+            type: Function,
+            required: true
+        },
+        context: {
+            type: Object,
+            default: null
+        },
+        highlightCurrentRow: {
+            type: Boolean,
+            default: false
         },
         currentRow: {
             type: Object,
@@ -230,6 +282,10 @@ export default {
             type: String,
             required: true
         },
+        showOverflowTooltip: {
+            type: [Boolean, Object],
+            default: false
+        },
         expandWidth: {
             type: String,
             required: true
@@ -247,17 +303,46 @@ export default {
             required: true
         },
         // 添加spanMethod属性
-        spanMethod: {
-            type: Function,
-            default: null
-        }
-    },
+        spanMethod: {
+            type: Function,
+            default: null
+        },
+        hasExpandableChildren: {
+            type: Function,
+            required: true
+        },
+        isLazyLoading: {
+            type: Function,
+            required: true
+        }
+    },
     emits: ['rowClick', 'toggleExpand', 'toggleSelect'],
     methods: {
         isSelected(row) {
             return this.selectedRows.some(r => r[this.rowKey] === row[this.rowKey]);
         },
-        // 获取单元格的合并信息
+        isOverflowTooltipEnabled(column) {
+            if (column && column.type === 'selection') {
+                return false;
+            }
+            if (column && typeof column.showOverflowTooltip !== 'undefined') {
+                return !!column.showOverflowTooltip;
+            }
+            return !!this.showOverflowTooltip;
+        },
+        getRowStyle(row, rowIndex) {
+            if (typeof this.rowStyle === 'function') {
+                return this.rowStyle({
+                    row,
+                    rowIndex,
+                    level: this.level,
+                    parentRow: this.parentRow,
+                    context: this.context
+                }) || {};
+            }
+            return this.rowStyle || {};
+        },
+        // 获取单元格的合并信息
         getCellSpan(rowIndex, columnIndex) {
             if (typeof this.spanMethod !== 'function') {
                 return { rowspan: 1, colspan: 1 };
@@ -266,12 +351,13 @@ export default {
             const row = this.row;
             const column = this.columns[columnIndex];
             
-            const result = this.spanMethod({
-                row,
-                column,
-                rowIndex,
-                columnIndex
-            });
+            const result = this.spanMethod({
+                row,
+                column,
+                rowIndex,
+                columnIndex,
+                context: this.context
+            });
             
             if (Array.isArray(result)) {
                 const [rowspan, colspan] = result;