@lx-frontend/wrap-element-ui 1.0.0-beta.4 → 1.0.0-beta.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lx-frontend/wrap-element-ui",
-  "version": "1.0.0-beta.4",
+  "version": "1.0.0-beta.5",
   "description": "wrap-element-ui",
   "author": "",
   "main": "dist/index.mjs",

package/src/components/EditableTable/index.vue

@@ -55,8 +55,9 @@
             <div class="view-setting__content-right-frize">
               冻结前
               <el-input
-                v-model="leftFixedColumnCount"
                 class="view-setting__content-right-input"
+                :value="tempLeftFixedColumnCount"
+                @input="handleInputTempLeftFixedColumnCount"
               />
               列
             </div>
@@ -788,6 +789,8 @@ const {
   columnsToBeShown,
   viewSettingVisible,
   leftFixedColumnCount,
+  tempLeftFixedColumnCount,
+  handleInputTempLeftFixedColumnCount,
   handleViewSettingShow,
   handleViewSettingClose,
   handleViewSettingConfirm

package/src/components/EditableTable/useViewSetting.ts

@@ -13,6 +13,7 @@ export default function useViewSetting({ tableDomRef, showingColumns, actualColu
   const columnsToBeShown = ref<string[]>([]); // 显示设置弹窗中勾选的列
   const viewSettingVisible = ref(false);
   const leftFixedColumnCount = ref(0);
+  const tempLeftFixedColumnCount = ref(0);
 
   const storageKey = computed(() => `@lx-frontend/wrap-element-ui/table_setting_cloumns/${props.settingStorgeKey || (location.pathname === '/' ? location.hash : location.pathname)}`);
 
@@ -37,14 +38,14 @@ export default function useViewSetting({ tableDomRef, showingColumns, actualColu
           if (!cache.showingColumns || !Array.isArray(cache.showingColumns)) {
             setColumns();
           } else {
-            showingColumns.value = cache.keys.filter(key => _keys.has(key));
+            showingColumns.value = cache.showingColumns.filter(key => _keys.has(key));
           }
           const _leftFixedColumnCount = Number(cache?.leftFixedColumnCount)
           leftFixedColumnCount.value = isNaN(_leftFixedColumnCount) ? (props.leftFixedCount as number) : _leftFixedColumnCount;
           // 写入清理后的数据
           saveSettingToStorge();
         } catch (error) {
-          console.error('缓存数据异常');
+          console.error(error);
           localStorage.removeItem(storageKey.value);
           setColumns();
         }
@@ -58,6 +59,7 @@ export default function useViewSetting({ tableDomRef, showingColumns, actualColu
     (val) => {
       viewSettingDragSortOptions.value = props.columnConfig
         .filter(c => val.includes(c.prop));
+      if (tempLeftFixedColumnCount.value > val.length) tempLeftFixedColumnCount.value = val.length
     },
     { immediate: true }
   )
@@ -78,6 +80,7 @@ export default function useViewSetting({ tableDomRef, showingColumns, actualColu
   const handleViewSettingShow = () => {
     viewSettingDragSortOptions.value = actualColumns.value
       .filter(c => columnsToBeShown.value.includes(c.prop));
+    tempLeftFixedColumnCount.value = leftFixedColumnCount.value;
     viewSettingVisible.value = true;
   }
 
@@ -90,19 +93,25 @@ export default function useViewSetting({ tableDomRef, showingColumns, actualColu
   const handleViewSettingConfirm = async () => {
     viewSettingVisible.value = false;
     showingColumns.value = viewSettingDragSortOptions.value.map(c => c.prop);
-    localStorage.setItem(storageKey.value, JSON.stringify({
-      keys: showingColumns.value,
-      leftFixedColumnCount: leftFixedColumnCount.value,
-    }));
+    leftFixedColumnCount.value = tempLeftFixedColumnCount.value;
+    saveSettingToStorge()
     await nextTick();
     tableDomRef.value?.doLayout();
   }
 
+  const handleInputTempLeftFixedColumnCount = (value: string) => {
+    const _value = Number(value)
+    if (isNaN(_value)) return
+    tempLeftFixedColumnCount.value = Math.max(0, Math.min(columnsToBeShown.value.length, Math.floor(_value)))
+  }
+
   return {
     viewSettingDragSortOptions,
     columnsToBeShown,
     viewSettingVisible,
     leftFixedColumnCount,
+    tempLeftFixedColumnCount,
+    handleInputTempLeftFixedColumnCount,
     handleViewSettingShow,
     handleViewSettingClose,
     handleViewSettingConfirm