列设置添加缓存

调整监测点台账导出id重复问题

src/components/table/column/index.vue

@@ -1,23 +1,41 @@
-<script lang='ts'>
-import { defineComponent, createVNode, reactive } from 'vue'
-import { Column } from 'vxe-table'
-import { uuid } from '@/utils/random'
-
-export default defineComponent({
-    name: 'Column',
-    props: {
-        attr: {
-            type: Object,
-            required: true
-        }
-    },
-    setup(props, { slots }) {
-        const attr = reactive(props.attr)
-        attr['align'] = attr['align'] ? attr['align'] : 'center'
-        attr['column-key'] = attr['column-key'] ? attr['column-key'] : attr.prop || uuid()
-        return () => {
-            return createVNode(Column, attr, slots.default)
-        }
-    }
-})
-</script>
+<script lang="ts">
+import { defineComponent, createVNode, reactive } from 'vue'
+import { Column } from 'vxe-table'
+import { uuid } from '@/utils/random'
+
+/** storage 开启时列必须有稳定 field；序号/操作等无 field 列按 title 生成 */
+function resolveColumnField(attr: Record<string, any>): string | undefined {
+    if (attr.field) return attr.field
+    if (attr.prop) return attr.prop
+    // checkbox / radio / expand / seq 等类型列由 vxe 内部处理，可不强制 field
+    if (attr.type && ['checkbox', 'radio', 'expand', 'html'].includes(attr.type)) {
+        return undefined
+    }
+    if (attr.title != null && attr.title !== '') {
+        return `__col_${attr.title}`
+    }
+    return `col_${uuid()}`
+}
+
+export default defineComponent({
+    name: 'Column',
+    props: {
+        attr: {
+            type: Object,
+            required: true
+        }
+    },
+    setup(props, { slots }) {
+        const attr = reactive({ ...props.attr })
+        attr['align'] = attr['align'] ? attr['align'] : 'center'
+        const field = resolveColumnField(attr)
+        if (field) {
+            attr.field = field
+        }
+        attr['column-key'] = attr['column-key'] ? attr['column-key'] : attr.field || attr.prop || uuid()
+        return () => {
+            return createVNode(Column, attr, slots.default)
+        }
+    }
+})
+</script>

src/components/table/defaultAttribute.ts

@@ -7,11 +7,11 @@ export const defaultAttribute: VxeTableProps = {
     stripe: true,
     size: 'small',
     columnConfig: { resizable: true, useKey: true },
-    rowConfig: { isCurrent: true, isHover: true, keyField: 'id' },
+    rowConfig: { isCurrent: true, isHover: true,  },
     scrollX: { scrollToLeftOnChange: true },
     scrollY: { enabled: false },
     // 注意：全局不要默认开启 treeConfig，会与 stripe 冲突；树表在页面自行配置
-    customConfig: { enabled: true, allowFixed: false, showFooter: false, immediate: true, mode: 'default' },
+    customConfig: { enabled: true, allowFixed: true, storage: true, showFooter: false, immediate: true ,mode:'default'},
     showOverflow: 'tooltip',
     showHeaderOverflow: false
 }

src/components/table/index.vue

@@ -1,20 +1,23 @@
 <template>
     <div :style="{ height: typeof props.height === 'string' ? props.height : tableStore.table.height }">
         <div v-if="showCustomColumn && !tableStore?.table?.customColumnInHeader" class="table-custom-toolbar">
-            <el-button icon="el-icon-Setting" @mousedown="onCustomColumnMousedown" @click="openCustomColumn">列设置</el-button>
+            <el-button icon="el-icon-Setting" @mousedown="onCustomColumnMousedown" @click="openCustomColumn">
+                列设置
+            </el-button>
         </div>
         <vxe-table
             ref="tableRef"
             height="auto"
             :key="key"
+            :id="getTableId()"
             :data="tableStore.table.data"
             v-loading="tableStore.table.loading"
-           v-bind="tableBindProps"
+            v-bind="tableBindProps"
             @checkbox-all="selectChangeEvent"
             @checkbox-change="selectChangeEvent"
             @cell-click="onCellClick"
         >
-          <!-- @sort-change="handleSortChange" -->
+            <!-- @sort-change="handleSortChange" -->
             <!-- Column 组件内部是 el-table-column -->
             <template v-if="isGroup">
                 <GroupColumn :column="tableStore.table.column" />
@@ -163,6 +166,9 @@ const openCustomColumn = () => {
 const getRef = () => {
     return tableRef.value
 }
+const getTableId = () => {
+    return tableStore.table.filename || document.querySelectorAll('.ba-nav-tab.active')[0].textContent || ''
+}
 // 排序
 const handleSortChange = ({ column, order }: { column: TableColumn; order: 'asc' | 'desc' | null }) => {
     // console.log('排序列:', column?.property);