n20-common-lib 3.1.0 → 3.1.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "n20-common-lib",
-  "version": "3.1.0",
+  "version": "3.1.1",
   "private": false,
   "scripts": {
     "serve": "vue-cli-service serve",

package/src/components/ShowColumn/index.vue

@@ -28,7 +28,7 @@
               }}</el-checkbox>
             </div>
           </div>
-          <div class="flex-item p-r" style="height: 50%; overflow: auto">
+          <div class="flex-item p-r" style="height: 80%; overflow: auto">
             <!-- :value 需包含 static 列的 label，使其显示为选中状态 -->
             <el-checkbox-group :value="checkedLabelValues" @change="handleCheckedChange">
               <template v-if="!columnsGroups">

package/src/components/v3/TablePro/index.vue

@@ -302,7 +302,7 @@
       @resize="sizeSet"
       @toggle-expand="toggleExpand"
       @toggle-operate-fixed="handleToggleOperateFixed"
-      @visible-column="dialogVisible = !dialogVisible"
+      @visible-column="handleVisibleColumn"
     />
     <!-- 操作列的悬浮按钮组 -->
     <transition name="hover-btns-fade">
@@ -680,6 +680,10 @@ export default {
     }
   },
   methods: {
+    handleVisibleColumn() {
+      this.isExport = false
+      this.dialogVisible = !this.dialogVisible
+    },
     openExportColumn() {
       this.dialogVisible = true
       this.isExport = true
@@ -718,13 +722,45 @@ export default {
     },
     async getColumns() {
       try {
-        const columns = await this.$refs.showColumn.getColumns(this.pageId)
-        this.checkColumns = columns?.length ? columns : this.filterDefaultHidden(this.columns)
+        const columns = await this.$refs?.showColumn?.getColumns(this.pageId)
+
+        if (columns?.length) {
+          this.checkColumns = columns
+          // 将 remote: true 的远程列同步写入 this.columns，保持位置一致
+          this.syncRemoteColumns(columns)
+        } else {
+          this.checkColumns = this.filterDefaultHidden(this.columns)
+        }
       } catch (err) {
         // API 请求失败时回退到过滤后的 columns prop
         this.checkColumns = this.filterDefaultHidden(this.columns)
       }
     },
+    // 供组件外部调用，刷新表头数据（重新请求 getColumns 并同步远程列）
+    async refreshColumns() {
+      if (this.showColumn && this.pageId) {
+        await this.getColumns()
+        // 强制重建 vxe-table，确保列变更后视图正确刷新
+        this.colsKey++
+      }
+    },
+    // 将 API 返回中标记 remote: true 的列同步到 this.columns，保持对应位置一致
+    syncRemoteColumns(apiColumns) {
+      apiColumns.forEach((apiCol, index) => {
+        if (!apiCol.remote) return
+        // 按 prop 或 labelKey 匹配 this.columns 中是否已存在
+        const matchKey = apiCol.prop ? 'prop' : this.labelKey
+        const existingIdx = this.columns.findIndex((c) => c[matchKey] === apiCol[matchKey])
+        if (existingIdx !== -1) {
+          // 已存在则替换，保持位置以 API 返回为准
+          this.$set(this.columns, existingIdx, apiCol)
+        } else {
+          // 不存在则插入到对应位置（避免 $set 索引超出长度产生稀疏数组）
+          const insertIdx = Math.min(index, this.columns.length)
+          this.columns.splice(insertIdx, 0, apiCol)
+        }
+      })
+    },
     /**
      * 一键展开/折叠表格树形行（仅处理第一层级数据行）
      * 通过 vxe-table 的 setTreeExpand API 批量设置顶层行的展开状态，