stellar-ui-plus 1.17.22 → 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

@@ -9,9 +9,6 @@ import { groupByKeys } from './utils';
 import { useColorStore } from '../../store/color';
 let { getColor } = useColorStore();
 
-let tableLength = 0;
-let uuid = utils.guid();
-
 const componentName = `ste-table`;
 defineOptions({
     name: componentName,
@@ -70,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;
 });
@@ -96,7 +94,6 @@ const cmpShowFixedPlaceholder = computed(() => {
 });
 
 const dataChangeFun = (fullLength: number = 0, val: any) => {
-    tableLength = val.length;
     // 由于没有数据时会导致插槽无法渲染，然后表头无法显示，所以在无数据时先给默认值，让表头能渲染，再加延时，恢复成原来的数据
     if (val.length === 0) {
         tableData.value = [{}];
@@ -262,7 +259,7 @@ defineExpose({ clearSelection, toggleAllSelection, toggleRowSelection, getSelect
 </script>
 
 <template>
-    <view class="ste-table-root" :class="[cmpRootClass]" :style="[cmpRootStyle]" v-if="tableData.length > 0" :id="'ste-table-' + uuid">
+    <view class="ste-table-root" :class="[cmpRootClass]" :style="[cmpRootStyle]">
         <view class="ste-table-content">
             <view class="fixed-placeholder" v-if="cmpShowFixedPlaceholder" />
             <view class="ste-table-header" :class="[getHeaderRowClass()]" :style="[getHeaderRowStyle() as CSSProperties]" v-if="showHeader">

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.22",
+    "version": "1.17.23",
     "description": "",
     "author": "",
     "license": "MIT",