uview-ultra 4.5.46

package/components/up-table2/tableRow.vue

@@ -0,0 +1,329 @@
+<style lang="scss" scoped>
+.up-table-row {
+    display: flex;
+    flex-direction: row;
+    position: relative;
+}
+
+// 添加border样式支持
+.up-table-border {
+    border-top: 1px solid #ebeef5;
+    border-left: 1px solid #ebeef5;
+    border-right: 1px solid #ebeef5;
+    .up-table-cell {
+        border-right: 1px solid #ebeef5;
+    }
+
+    .up-table-cell:last-child {
+        border-right: none;
+    }
+}
+
+.up-table-cell {
+    flex: 1;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    padding: 10px 1px;
+    font-size: 14px;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    line-height: 1.1;
+    border-bottom: 1px solid #ebeef5;
+    &.up-text-left {
+        justify-content: flex-start;
+        text-align: left;
+    }
+    &.up-text-center {
+        justify-content: center;
+        text-align: center;
+    }
+    &.up-text-right {
+        justify-content: flex-end;
+        text-align: right;
+    }
+}
+
+.up-table-row-zebra {
+    background-color: #fafafa;
+}
+
+.up-table-row-highlight {
+    background-color: #f5f7fa;
+}
+
+.up-table-empty {
+    text-align: center;
+    padding: 20px;
+    color: #999;
+}
+
+// 隐藏被合并的单元格
+.up-table-cell-hidden {
+    opacity: 0;
+}
+
+// 合并单元格样式
+.up-table-cell-merged {
+    z-index: 1;
+}
+</style>
+<template>
+    <view class="up-table-row up-table-row-child"
+        :class="[highlightCurrentRow && currentRow === row ? 'up-table-row-highlight' : '',
+        rowClassName ? rowClassName(row, rowIndex) : '',
+        stripe && rowIndex % 2 === 1 ? 'up-table-row-zebra' : ''
+        ]" :style="{height: rowHeight}" @click="handleRowClick(row)">
+        <view v-for="(col, colIndex) in columns" :key="col.key"
+            class="up-table-cell"
+            :class="[col.align ? 'up-text-' + col.align : '',
+                cellClassName ? cellClassName(row, col) : '',
+                getFixedClass(col),
+                getCellSpanClass(rowIndex, colIndex)
+            ]"
+            :style="[cellStyleInner({row: row, column: col, rowIndex: rowIndex, columnIndex: colIndex, level: level}), getCellSpanStyle(rowIndex, colIndex)]">
+                <!-- 复选框列 -->
+                <view v-if="col.type === 'selection'">
+                    <checkbox :checked="isSelected(row)"
+                        @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="up-table-cell__content">
+                            {{ row[col.key] }}
+                        </view>
+                    </slot>
+                </template>
+        </view>
+    </view>
+    <!-- 递归渲染更深层的子级 -->
+        <template v-if="isExpanded(row) && row[treeProps.children] && row[treeProps.children].length > 0">
+            <template v-for="(rowChild, childIndex) in row[treeProps.children]" :key="rowChild[rowKey] != null ? rowChild[rowKey] : childIndex">
+                <table-row
+                    :row="rowChild"
+                    :rowIndex="childIndex"
+                    :parent-row="row"
+                    :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="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)"
+                >
+                <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>
+                </table-row>
+            </template>
+        </template>
+</template>
+
+<script setup>
+defineOptions({
+	name: 'tableRow',
+	// #ifdef MP-WEIXIN
+	options: {
+		virtualHost: true
+	}
+	// #endif
+})
+
+const props = defineProps({
+	row: {
+		type: Object,
+		required: true
+	},
+	rowIndex: {
+		type: Number,
+		required: true
+	},
+	parentRow: {
+		type: Object,
+		default: null
+	},
+	columns: {
+		type: Array,
+		required: true
+	},
+	treeProps: {
+		type: Object,
+		required: true
+	},
+	rowKey: {
+		type: String,
+		required: true
+	},
+	expandedKeys: {
+		type: Array,
+		required: true
+	},
+	cellStyleInner: {
+		type: Function,
+		required: true
+	},
+	isExpanded: {
+		type: Function,
+		required: true
+	},
+	rowClassName: {
+		type: Function,
+		default: null
+	},
+	stripe: {
+		type: Boolean,
+		default: false
+	},
+	cellClassName: {
+		type: Function,
+		default: null
+	},
+	getFixedClass: {
+		type: Function,
+		required: true
+	},
+	highlightCurrentRow: {
+		type: Boolean,
+		default: false
+	},
+	currentRow: {
+		type: Object,
+		default: null
+	},
+	handleRowClick: {
+		type: Function,
+		required: true
+	},
+	toggleExpand: {
+		type: Function,
+		required: true
+	},
+	level: {
+		type: Number,
+		required: true
+	},
+	// 添加computedMainCol属性
+	computedMainCol: {
+		type: String,
+		required: true
+	},
+	expandWidth: {
+		type: String,
+		required: true
+	},
+	hasTree: {
+		type: Boolean,
+		required: false
+	},
+	selectedRows: {
+		type: Array,
+		required: false
+	},
+	rowHeight: {
+		type: String,
+		required: true
+	},
+	// 添加spanMethod属性
+	spanMethod: {
+		type: Function,
+		default: null
+	}
+})
+const emit = defineEmits(['rowClick', 'toggleExpand', 'toggleSelect'])
+
+function isSelected(row) {
+	return props.selectedRows.some(r => r[props.rowKey] === row[props.rowKey])
+}
+
+function getCellSpan(rowIndex, columnIndex) {
+	if (typeof props.spanMethod !== 'function') {
+		return { rowspan: 1, colspan: 1 }
+	}
+
+	const row = props.row
+	const column = props.columns[columnIndex]
+
+	const result = props.spanMethod({
+		row,
+		column,
+		rowIndex,
+		columnIndex
+	})
+
+	if (Array.isArray(result)) {
+		const [rowspan, colspan] = result
+		return { rowspan: rowspan != null ? rowspan : 1, colspan: colspan != null ? colspan : 1 }
+	} else 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 }
+}
+
+function getCellSpanClass(rowIndex, columnIndex) {
+	const span = getCellSpan(rowIndex, columnIndex)
+
+	if (span.rowspan === 0 || span.colspan === 0) {
+		return 'up-table-cell-hidden'
+	} else if (span.rowspan > 1 || span.colspan > 1) {
+		return 'up-table-cell-merged'
+	}
+
+	return ''
+}
+
+function getCellSpanStyle(rowIndex, columnIndex) {
+	const span = getCellSpan(rowIndex, columnIndex)
+	const style = {}
+
+	if (span.rowspan > 1) {
+		const currentHeight = parseInt(props.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
+}
+</script>
+