fix

x-extends · Oct 8, 2024 · a377a4f · a377a4f
1 parent ed8900b
commit a377a4f
Show file tree

Hide file tree

Showing 6 changed files with 140 additions and 24 deletions.
diff --git a/README.md b/README.md
@@ -122,15 +122,54 @@ createApp(App).use(VxeUI).use(VxeTable).mount('#app')
 ***不建议将第三方的 CDN 地址用于正式环境，因为该连接随时都可能会失效***  
 
 ```HTML
-<!-- style -->
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vxe-pc-ui/lib/style.css">
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vxe-table@next/lib/style.css">
-<!-- vue -->
-<script src="https://cdn.jsdelivr.net/npm/vue"></script>
-<!-- table -->
-<script src="https://cdn.jsdelivr.net/npm/xe-utils"></script>
-<script src="https://cdn.jsdelivr.net/npm/vxe-pc-ui"></script>
-<script src="https://cdn.jsdelivr.net/npm/vxe-table@next"></script>
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+  <!-- style -->
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vxe-pc-ui@4/lib/style.css">
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vxe-table@4/lib/style.css">
+  <!-- vue -->
+  <script src="https://cdn.jsdelivr.net/npm/vue@3"></script>
+  <!-- table -->
+  <script src="https://cdn.jsdelivr.net/npm/xe-utils"></script>
+  <script src="https://cdn.jsdelivr.net/npm/vxe-pc-ui@4"></script>
+  <script src="https://cdn.jsdelivr.net/npm/vxe-table@4"></script>
+</head>
+<body>
+  <div id="app">
+    <div>
+      <vxe-table :data="tableData">
+        <vxe-column type="seq" title="Seq" width="60"></vxe-column>
+        <vxe-column field="name" title="Name"></vxe-column>
+        <vxe-column field="role" title="Role"></vxe-column>
+        <vxe-colgroup title="Group1">
+          <vxe-column field="sex" title="Sex"></vxe-column>
+          <vxe-column field="address" title="Address"></vxe-column>
+        </vxe-colgroup>
+      </vxe-table>
+    </div>
+  </div>
+  <script>
+    (function () {
+      var App = {
+        data() {
+          return {
+            tableData: [
+              { id: 10001, name: 'Test1', role: 'Develop', sex: 'Man', address: 'Shenzhen' },
+              { id: 10002, name: 'Test2', role: 'Test', sex: 'Man', address: 'Guangzhou' },
+              { id: 10003, name: 'Test3', role: 'PM', sex: 'Man', address: 'Shanghai' }
+            ]
+          }
+        }
+      }
+      Vue.createApp(App).use(VxeUI).use(VXETable).mount('#app')
+    })()
+  </script>
+</body>
+</html>
 ```
 
 ## 示例
@@ -150,14 +189,18 @@ createApp(App).use(VxeUI).use(VxeTable).mount('#app')
   </div>
 </template>
 
-<script lang="ts" setup>
-import { ref } from 'vue'
-
-const tableData = ref([
-  { id: 10001, name: 'Test1', role: 'Develop', sex: 'Man', address: 'Shenzhen' },
-  { id: 10002, name: 'Test2', role: 'Test', sex: 'Man', address: 'Guangzhou' },
-  { id: 10003, name: 'Test3', role: 'PM', sex: 'Man', address: 'Shanghai' }
-])
+<script>
+export default {
+  data() {
+    return {
+      tableData: [
+        { id: 10001, name: 'Test1', role: 'Develop', sex: 'Man', address: 'Shenzhen' },
+        { id: 10002, name: 'Test2', role: 'Test', sex: 'Man', address: 'Guangzhou' },
+        { id: 10003, name: 'Test3', role: 'PM', sex: 'Man', address: 'Shanghai' }
+      ]
+    }
+  }
+}
 </script>
 ```
 

diff --git a/examples/App.vue b/examples/App.vue
@@ -29,6 +29,7 @@ const navList = ref([
   { name: 'TableTest4', routerLink: { name: 'TableTest4' } },
   { name: 'TableTest5', routerLink: { name: 'TableTest5' } },
   { name: 'TableTest6', routerLink: { name: 'TableTest6' } },
+  { name: 'TableTest7', routerLink: { name: 'TableTest7' } },
   { name: 'GridTest', routerLink: { name: 'GridTest' } },
   { name: 'TestKeepTest1', routerLink: { name: 'TestKeepTest1' } },
   { name: 'TestKeepTest2', routerLink: { name: 'TestKeepTest2' } },

diff --git a/examples/router/index.ts b/examples/router/index.ts
@@ -57,6 +57,11 @@ const routes: Array<RouteRecordRaw> = [
         path: 'table6',
         name: 'TableTest6',
         component: () => import('../views/table/TableTest6.vue')
+      },
+      {
+        path: 'table7',
+        name: 'TableTest7',
+        component: () => import('../views/table/TableTest7.vue')
       }
     ]
   },

diff --git a/examples/views/table/TableTest7.vue b/examples/views/table/TableTest7.vue
@@ -0,0 +1,61 @@
+<template>
+  <div>
+    <vxe-button @click="insertEvent">新增</vxe-button>
+    <vxe-table
+      border
+      show-overflow
+      ref="tableRef"
+      :edit-config="editConfig"
+      :data="tableData"
+      @edit-activated="editActivatedEvent">
+      <vxe-column type="seq" width="70"></vxe-column>
+      <vxe-column field="name" title="Name" :edit-render="{name: 'input'}"></vxe-column>
+      <vxe-column field="sex" title="Sex" :edit-render="{name: 'input'}"></vxe-column>
+      <vxe-column field="age" title="Age" :edit-render="{name: 'input'}"></vxe-column>
+    </vxe-table>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue'
+import type { VxeTableInstance, VxeTablePropTypes } from '../../../types'
+
+interface RowVO {
+  id: number
+  name: string
+  role: string
+  sex: string
+  age: number
+  address: string
+}
+
+const tableRef = ref<VxeTableInstance<RowVO>>()
+
+const tableData = ref<RowVO[]>([
+  { id: 10001, name: 'Test1', role: 'Develop', sex: 'Man', age: 28, address: 'test abc' },
+  { id: 10002, name: 'Test2', role: 'Test', sex: 'Women', age: 22, address: 'Guangzhou' },
+  { id: 10003, name: 'Test3', role: 'PM', sex: 'Man', age: 32, address: 'Shanghai' },
+  { id: 10004, name: 'Test4', role: 'Designer', sex: 'Women', age: 24, address: 'Shanghai' }
+])
+
+const editConfig = ref<VxeTablePropTypes.EditConfig>({
+  trigger: 'click',
+  mode: 'cell'
+})
+
+const insertEvent = async () => {
+  const $table = tableRef.value
+  if ($table) {
+    const record = {
+      sex: '1',
+      date12: '2021-01-01'
+    }
+    const { row: newRow } = await $table.insert(record)
+    await $table.setEditCell(newRow, 'name')
+  }
+}
+
+const editActivatedEvent = (params: any) => {
+  console.log(params)
+}
+</script>
diff --git a/package.json b/package.json
@@ -28,7 +28,7 @@
   "style": "lib/style.css",
   "typings": "types/index.d.ts",
   "dependencies": {
-    "vxe-pc-ui": "^4.2.16"
+    "vxe-pc-ui": "^4.2.18"
   },
   "devDependencies": {
     "@types/resize-observer-browser": "^0.1.11",

diff --git a/packages/table/src/table.ts b/packages/table/src/table.ts
@@ -5446,11 +5446,13 @@ export default defineComponent({
       cacheRowMap (isSource) {
         const { treeConfig } = props
         const treeOpts = computeTreeOpts.value
-        let { fullDataRowIdData, fullAllDataRowIdData, tableFullData, tableFullTreeData } = internalData
+        const { fullAllDataRowIdData, tableFullData, tableFullTreeData } = internalData
         const childrenField = treeOpts.children || treeOpts.childrenField
         const hasChildField = treeOpts.hasChild || treeOpts.hasChildField
         const rowkey = getRowkey($xeTable)
         const isLazy = treeConfig && treeOpts.lazy
+        const fullAllDataRowIdMaps: Record<string, VxeTableDefines.RowCacheItem> = {}
+        const fullDataRowIdMaps: Record<string, VxeTableDefines.RowCacheItem> = {}
         const handleRow = (row: any, index: any, items: any, path?: any[], parent?: any, nodes?: any[]) => {
           let rowid = getRowid($xeTable, row)
           const seq = treeConfig && path ? toTreePathSeq(path) : index + 1
@@ -5462,16 +5464,20 @@ export default defineComponent({
           if (isLazy && row[hasChildField] && XEUtils.isUndefined(row[childrenField])) {
             row[childrenField] = null
           }
-          const rest = { row, rowid, seq, index: treeConfig && parent ? -1 : index, _index: -1, $index: -1, items, parent, level }
+          let cacheItem = fullAllDataRowIdData[rowid]
+          if (!cacheItem) {
+            cacheItem = { row, rowid, seq, index: -1, _index: -1, $index: -1, items, parent, level }
+          }
           if (isSource) {
-            fullDataRowIdData[rowid] = rest
+            cacheItem.index = treeConfig && parent ? -1 : index
+            fullDataRowIdMaps[rowid] = cacheItem
           }
-          fullAllDataRowIdData[rowid] = rest
+          fullAllDataRowIdMaps[rowid] = cacheItem
         }
         if (isSource) {
-          fullDataRowIdData = internalData.fullDataRowIdData = {}
+          internalData.fullDataRowIdData = fullDataRowIdMaps
         }
-        fullAllDataRowIdData = internalData.fullAllDataRowIdData = {}
+        internalData.fullAllDataRowIdData = fullAllDataRowIdMaps
         if (treeConfig) {
           XEUtils.eachTree(tableFullTreeData, handleRow, { children: childrenField })
         } else {