web-component-gallery 2.3.17 → 2.3.19

package/lib/transfer-table/index.vue

@@ -13,19 +13,21 @@
     <div class="TransferTable__Content">
       <div class="TransferTable__Left">
         <Table
+          ref="tableA"
           v-bind="{
             datas: listDatasA,
             columns,
             paginationParams: listPaginationA,
             rowSelection: {
               selectedRowKeys: selectedKeys,
-              onChange: selectedRecords,
+              onChange: (selectedKey, selectedRecord) => selectedRecords(selectedKey, selectedRecord, rowKeyA),
               getCheckboxProps: record => ({
                 props: {
                   disabled: isRecordDisabled(record)
                 }
               })
-            }
+            },
+            ...tablePropsA
           }"
           @pageSizeChange="(pagination) => (listPaginationA = pagination, onListPageAHandler())"
         >
@@ -35,7 +37,7 @@
               v-for="(op, i) in operateSetting" 
               :key="i" 
               type="link"
-              :disabled="shouldDisableButton(op, customProps)"
+              :disabled="shouldDisableButton(op, rowKeyA)"
               @click="handleTableAction(op.code, customProps)"
             >
               {{ op.title }}
@@ -46,21 +48,23 @@
 
       <div class="TransferTable__Right">
         <Table
+          ref="tableB"
           v-bind="{
             datas: listDatasB,
             columns: resetColumnsB,
             paginationParams: listPaginationB,
             rowSelection: {
               selectedRowKeys: selectedKeys,
-              onChange: selectedRecords,
+              onChange: (selectedKey, selectedRecord) => selectedRecords(selectedKey, selectedRecord, rowKeyB),
               getCheckboxProps: record => ({
                 props: {
                   disabled: isRecordDisabled(record)
                 }
               })
-            }
+            },
+            ...tablePropsB
           }"
-          @pageSizeChange="(pagination) => (listPaginationB = pagination, onListPageBHandler())"
+          @pageSizeChange="onListPageBHandler"
         >
           <span class="Table__Name" slot="ATableTitle">已选{{title}}列表</span>
           <template #action="{customProps, index}">
@@ -68,7 +72,7 @@
               v-for="(op, i) in operateSetting"
               :key="i"
               type="link"
-              :disabled="shouldDisableButton(op, customProps)"
+              :disabled="shouldDisableButton(op, rowKeyB)"
               @click="handleTableAction(op.code, customProps)"
             >
               {{ op.title }}
@@ -109,6 +113,16 @@ export default {
     columns: Array,
     // B列表项配置（如不传，则默认与A列表项一致）
     columnsB: Array,
+    // A表额外属性配置
+    tablePropsA: {
+      type: Object,
+      default: () => ({})
+    },
+    // B表额外属性配置
+    tablePropsB: {
+      type: Object,
+      default: () => ({})
+    },
     // 支持传递额外参数
     extraParams: {
       type: Object,
@@ -165,6 +179,14 @@ export default {
     // B表格项配置
     resetColumnsB() {
       return this.columnsB || this.columns
+    },
+    // A表 rowKey
+    rowKeyA() {
+      return this.$refs.tableA.rowKey
+    },
+    // B表 rowKey
+    rowKeyB() {
+      return this.$refs.tableB.rowKey
     }
   },
   watch: {
@@ -183,7 +205,7 @@ export default {
         method: 'modalOpen',
         params: record
       })
-    }, 
+    },
     handleReset() {
       this.searchForm = {}
       this.handleSearch()
@@ -216,42 +238,42 @@ export default {
     },
 
     // 获取右侧表格数据(从已选记录中分页)
-    onListPageBHandler() {
+    onListPageBHandler(paginationB) {
       try {
         const chunks = chunkArray(this.selectedRecordsB, this.listPaginationB.size)
         this.listPaginationB = {
           ...this.listPaginationB,
-          current: chunks.length,
+          ...(paginationB || { current: chunks.length }),
           total: this.selectedRecordsB.length
         }
         this.listDatasB = chunks[this.listPaginationB.current - 1] || []
 
         // 同步选中状态
-        this.selectedKeys = this.selectedRecordsB.map(r => r.id)
+        this.selectedKeys = this.selectedRecordsB.map(r => r[this.rowKeyB])
       } catch(err) {
         console.error('更新已选列表失败:', err)
       }
     }, 
 
     // 取消 / 选择当前行
-    selectedRecords(selectedKey, selectedRecord) {
-      const currentIds = new Set(this.selectedRecordsB.map(r => r.id))
+    selectedRecords(selectedKey, selectedRecord, rowKey) {
+      const currentIds = new Set(this.selectedRecordsB.map(r => r[this.rowKeyB]))
       const newIds = new Set(selectedKey)
       
       this.selectedRecordsB = newIds.size > currentIds.size
-        ? [...this.selectedRecordsB, ...selectedRecord.filter(r => 
-            newIds.has(r.id) && !currentIds.has(r.id)
-          )]
-        : this.selectedRecordsB.filter(r => newIds.has(r.id))
+        ? [...this.selectedRecordsB, ...selectedRecord.map(r => {
+          if (newIds.has(r[rowKey]) && !currentIds.has(r[rowKey])) return { ...r, [this.rowKeyB]: r[rowKey] }
+        }).filter(Boolean)]
+        : this.selectedRecordsB.filter(r => newIds.has(r[this.rowKeyB]))
     },
 
     // 检查记录是否已被保存（需要禁用）
-    isRecordDisabled(record) {
-      return this.savedRecordIds.includes(record.id)
+    isRecordDisabled(rowKey) {
+      return this.savedRecordIds.includes(rowKey)
     },
 
     // 判断按钮是否应该禁用
-    shouldDisableButton(operation, record) {
+    shouldDisableButton(operation, rowKey) {
       // 如果没有设置 savedRecordIds，则不禁用任何按钮
       if (!this.savedRecordIds || this.savedRecordIds.length === 0) {
         return false
@@ -263,7 +285,7 @@ export default {
       }
       
       // 默认情况下，已保存的记录相关操作按钮会被禁用
-      return this.isRecordDisabled(record)
+      return this.isRecordDisabled(rowKey)
     }
   }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "web-component-gallery",
-  "version": "2.3.17",
+  "version": "2.3.19",
   "description": "基础vue、antdvue、less实现的私有组件库",
   "main": "dist/index.umd.js",
   "files": [