stellar-ui-plus 1.17.21 → 1.17.23

package/components/ste-table/ATTRIBUTES.md

@@ -29,6 +29,7 @@
 | `maxHeight` | 表格最大高度 | `number / string` | - | - | - |
 | `selectionIconColor` | 配置选择项图标色 | `object` | - | - | - |
 | `isPopover` | 是否为超出单元格时气泡显示内容 | `boolean` | - | - | - |
+| `popoverLine` | 单元格开启isPopover时，超过多少行才显示省略提示 | `number / string` | - | - | - |
 
 
 #### Events

package/components/ste-table/props.ts

@@ -45,7 +45,8 @@ const tableProps = {
         type: Object as PropType<typeof SELECTION_COLOR_CONFIG>,
         default: () => SELECTION_COLOR_CONFIG,
     },
-    isPopover: [Boolean, null],
+    isPopover: [Boolean, null], // 单元格是否开启内容超长时省略显示并长按显示提示
+    popoverLine: { type: [Number, String], default: 1 }, // 单元格开启isPopover时，超过多少行才显示省略提示
 };
 
 export type TableProps = ExtractPropTypes<typeof tableProps>;

package/components/ste-table/ste-table.easycom.json

@@ -158,6 +158,11 @@
             "description": "是否为超出单元格时气泡显示内容",
             "type": "boolean"
         },
+        {
+            "name": "popoverLine",
+            "description": "单元格开启isPopover时，超过多少行才显示省略提示",
+            "type": "number | string"
+        },
         {
             "name": "[event]select",
             "description": "当用户手动勾选数据行的 Checkbox 时触发的事件",

package/components/ste-table/ste-table.vue

@@ -1,10 +1,11 @@
 <script lang="ts" setup>
-import { computed, watch, ref, type CSSProperties } from 'vue';
+import { computed, watch, ref, type CSSProperties, toRaw, nextTick } from 'vue';
 import propsData, { TABLE_KEY, tableEmits, CHECK_ICON_SIZE, SELECTION_COLOR_CONFIG, type TableProps } from './props';
 import utils from '../../utils/utils';
 import { useProvide } from '../../utils/mixin';
 import useData from './useData';
 import type { TableColumnProps } from '../ste-table-column/props';
+import { groupByKeys } from './utils';
 import { useColorStore } from '../../store/color';
 let { getColor } = useColorStore();
 
@@ -66,6 +67,7 @@ const cmpRootStyle = computed(() => {
         '--table-height': utils.addUnit(props.height as string),
         '--table-max-height': utils.addUnit(props.maxHeight as string),
         '--ste-theme-color': utils.Color.hex2rgba(getColor().steThemeColor),
+        '--ste-table-popover-line': props.popoverLine,
     };
     return style;
 });
@@ -91,32 +93,73 @@ const cmpShowFixedPlaceholder = computed(() => {
     return props.fixed || props.height || Number(props.height) > 0 || props.maxHeight || Number(props.maxHeight) > 0;
 });
 
-watch(
-    () => props.data,
-    val => {
-        // 由于没有数据时会导致插槽无法渲染，然后表头无法显示，所以在无数据时先给默认值，让表头能渲染，再加延时，恢复成原来的数据
-        if (val.length === 0) {
-            tableData.value = [{}];
+const dataChangeFun = (fullLength: number = 0, val: any) => {
+    // 由于没有数据时会导致插槽无法渲染，然后表头无法显示，所以在无数据时先给默认值，让表头能渲染，再加延时，恢复成原来的数据
+    if (val.length === 0) {
+        tableData.value = [{}];
+    } else {
+        if (fullLength > 0) {
+            tableData.value = ensureArrayLength(10, val) as Obj[];
         } else {
             tableData.value = val as Obj[];
         }
-        initRowData();
-        calcSum();
-        initSelection();
-        setTimeout(() => {
-            tableData.value = val as Obj[];
-        });
+    }
+    initRowData();
+    calcSum();
+    initSelection();
+};
+
+watch(
+    () => props.data,
+    val => {
+        dataChangeFun(0, val);
     },
     { immediate: true, deep: true }
 );
 
+let lastChildrenCount = 0;
+let lastChangeTime = 0;
+let processTimer: any = null;
 watch(
     () => internalChildren,
-    () => {
-        setTimeout(() => {
+    val => {
+        const currentTime = Date.now();
+        const currentCount = val.length;
+
+        // 最后一次子元素变动时再执行初始化
+        if (processTimer) clearTimeout(processTimer);
+
+        // 如果内容没有变化，并且距离上次变化已经超过300ms
+        if (currentCount === lastChildrenCount && currentTime - lastChangeTime > 300 && currentCount > 0) {
+            console.log('内容已稳定，执行初始化');
+
             initColumns();
             initRowData();
-        }, 200);
+        } else {
+            // 更新最后一次变化的记录
+            lastChildrenCount = currentCount;
+            lastChangeTime = currentTime;
+
+            // 设置一个较短的延迟检查
+            processTimer = setTimeout(() => {
+                // 触发延迟检查
+                if (val.length === lastChildrenCount) {
+                    initColumns();
+                    initRowData();
+
+                    // #ifdef MP-WEIXIN
+                    const group = groupByKeys(val.map(e => e.props) as any);
+                    if (group[0].length > tableData.value.length) {
+                        // 由于uni-app 编译到微信小程序时，如果使用循环插槽导致插槽节点不会消失，所以使用折中办法，强行补全数据再还原
+                        dataChangeFun(group[0].length, tableData.value);
+                        nextTick(() => {
+                            tableData.value = props.data as any;
+                        });
+                    }
+                    // #endif
+                }
+            }, 50); // 从1000ms减少到400ms
+        }
     },
     { immediate: true, deep: true }
 );
@@ -153,17 +196,65 @@ function initColumns() {
         }
     });
 
-    columns.value = tempResult.map(e => {
-        if (!e.props.label && props.header && typeof props.header === 'function') {
-            e.props.label = props.header(e.props, tableData.value);
+    // 创建一个全新的数组，包含全新的普通对象
+    const finalColumns = [];
+
+    for (let i = 0; i < tempResult.length; i++) {
+        const e = tempResult[i];
+        const propsData = toRaw(e.props);
+
+        // 创建一个全新的对象
+        const newColumn: TableColumnProps = {} as TableColumnProps;
+
+        // 复制所有属性
+        for (const key in propsData) {
+            (newColumn as any)[key] = propsData[key];
         }
-        return e.props;
-    }) as TableColumnProps[];
+
+        // 特别处理 label
+        if (!newColumn.label && props.header && typeof props.header === 'function') {
+            const labelValue = props.header(newColumn, tableData.value);
+            // 强制设置 label，确保不会丢失
+            newColumn.label = labelValue;
+        }
+
+        finalColumns.push(newColumn);
+    }
+
+    // 直接赋值
+    columns.value = finalColumns;
+
     calcSum();
     loadSelectType();
     loadCanCheckArr();
 }
 
+/**
+ * 确保数组达到指定数量，不足则补充空对象
+ * @param targetCount 目标数量
+ * @param array 需要处理的数组
+ * @returns 处理后的数组
+ */
+function ensureArrayLength<T>(targetCount: number, array: T[]): T[] {
+    // 创建数组副本，避免修改原数组
+    const result = [...array];
+
+    // 计算需要补充的元素数量
+    const shortfall = targetCount - result.length;
+
+    // 如果数组长度已经够了或超出，直接返回原数组
+    if (shortfall <= 0) {
+        return result;
+    }
+
+    // 补充空对象到数组
+    for (let i = 0; i < shortfall; i++) {
+        result.push({} as T);
+    }
+
+    return result;
+}
+
 defineExpose({ clearSelection, toggleAllSelection, toggleRowSelection, getSelection });
 </script>
 
@@ -211,7 +302,7 @@ defineExpose({ clearSelection, toggleAllSelection, toggleRowSelection, getSelect
                                 :key="rowIndex"
                                 @click="rowClick(row, $event)"
                             >
-                                <slot :row="row"></slot>
+                                <slot :row="row" name="default"></slot>
                             </view>
                             <view class="ste-table-row sum" v-if="showSummary">
                                 <view class="ste-table-cell" v-for="(column, index) in columns" :key="index" :class="[getHeaderCellClass(column, 0)]">
@@ -238,7 +329,6 @@ defineExpose({ clearSelection, toggleAllSelection, toggleRowSelection, getSelect
                             :class="[getRowClass(row, rowIndex)]"
                             :style="[getRowStyle(row, rowIndex) as CSSProperties]"
                             v-for="(row, rowIndex) in tableData"
-                            :key="rowIndex"
                             @click="rowClick(row, $event)"
                         >
                             <slot :row="row"></slot>

package/components/ste-table/utils.ts

@@ -1,11 +1,68 @@
-type StyleOrClassFunction<T> = (params: object) => T
-type StyleOrClass<T> = T | StyleOrClassFunction<T> | undefined
+import type { TableColumnProps } from '../ste-table-column/props';
+import { toRaw } from 'vue';
+
+type StyleOrClassFunction<T> = (params: object) => T;
+type StyleOrClass<T> = T | StyleOrClassFunction<T> | undefined;
+interface ColumnItem extends TableColumnProps {
+    [key: string]: any;
+}
+
+/**
+ * 根据对象的 key 值将数组分组
+ * @param arr 要分组的数组
+ * @returns 分组后的二维数组
+ */
+function groupByKeys(arr: ColumnItem[]): ColumnItem[][] {
+    // 如果数组为空，直接返回空数组
+    if (!arr.length) return [];
+
+    const result: ColumnItem[][] = [];
+    const usedIndices = new Set<number>();
+
+    // 遍历数组
+    for (let i = 0; i < arr.length; i++) {
+        // 如果当前元素已经被分组，则跳过
+        if (usedIndices.has(i)) continue;
+
+        const currentItem = toRaw(arr[i]);
+        const group: ColumnItem[] = [currentItem];
+        usedIndices.add(i);
+
+        // 查找与当前元素匹配的其他元素
+        for (let j = i + 1; j < arr.length; j++) {
+            if (usedIndices.has(j)) continue;
+
+            const compareItem = toRaw(arr[j]);
+            let isMatch = true;
+
+            // 比较两个对象的所有属性
+            for (const key in currentItem) {
+                // 如果属性值都为空，认为它们相等
+                const currentValue = currentItem[key] || '';
+                const compareValue = compareItem[key] || '';
+
+                if (currentValue !== compareValue) {
+                    isMatch = false;
+                    break;
+                }
+            }
+
+            // 确保两个对象的属性数量相同
+            if (isMatch && Object.keys(currentItem).length === Object.keys(compareItem).length) {
+                group.push(compareItem);
+                usedIndices.add(j);
+            }
+        }
+
+        result.push(group);
+    }
+
+    return result;
+}
 
 function getStyleOrClass<T extends string | object>(fun: StyleOrClass<T>, params: object = {}): T | undefined {
-  if (typeof fun === 'function' && fun instanceof Function)
-    return (fun as StyleOrClassFunction<T>)(params)
-  else
-    return fun
+    if (typeof fun === 'function' && fun instanceof Function) return (fun as StyleOrClassFunction<T>)(params);
+    else return fun;
 }
 
-export { getStyleOrClass }
+export { getStyleOrClass, groupByKeys };

package/components/ste-table-column/ste-table-column.vue

@@ -153,7 +153,7 @@ function cellClick(this: any, event: any) {
                     <template v-if="!parentProps.isPopover">
                         {{ cellText() }}
                     </template>
-                    <table-popover v-else :text="cellText()"></table-popover>
+                    <table-popover v-else :text="cellText()" :line="parentProps.popoverLine"></table-popover>
                 </view>
             </slot>
             <view class="cell-box" v-else>

package/components/ste-table-column/table-popover.vue

@@ -9,6 +9,10 @@ const props = defineProps({
         type: [String, null],
         default: '',
     },
+    line: {
+        type: [Number, String],
+        default: 1,
+    }, // 配置超过多少行后才显示
 });
 
 const instance = getCurrentInstance() as unknown as ComponentPublicInstance;
@@ -38,7 +42,7 @@ const checkTextOverflow = async () => {
     let textData = await utils.querySelector<false>('.measure-text', instance);
 
     if (containerData && textData && textData.width && containerData.width) {
-        isTextOverflow.value = textData.width > containerData.width;
+        isTextOverflow.value = textData.width > containerData.width * Number(props.line);
     }
 };
 
@@ -141,9 +145,13 @@ const doHide = () => {
 }
 
 .ellipsis-box {
-    white-space: nowrap;
+    display: -webkit-box;
+    -webkit-line-clamp: var(--ste-table-popover-line);
+    line-clamp: var(--ste-table-popover-line);
+    -webkit-box-orient: vertical;
     overflow: hidden;
     text-overflow: ellipsis;
+    word-break: break-word;
     // #ifdef H5
     user-select: none;
     // #endif

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "stellar-ui-plus",
-    "version": "1.17.21",
+    "version": "1.17.23",
     "description": "",
     "author": "",
     "license": "MIT",