docs(grid): [grid] fix tree-grid-insert-delete-update demo (#1495)

opentiny · Mar 18, 2024 · 8523a35 · 8523a35
1 parent 3e02ac1
commit 8523a35
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 8 deletions.
diff --git a/...les/sites/demos/pc/app/grid/tree-table/tree-grid-insert-delete-update-composition-api.vue b/...les/sites/demos/pc/app/grid/tree-table/tree-grid-insert-delete-update-composition-api.vue
@@ -18,9 +18,9 @@
           </template>
         </tiny-grid-toolbar>
       </template>
-      <tiny-grid-column type="selection" width="100" tree-node></tiny-grid-column>
+      <tiny-grid-column type="selection" width="100"></tiny-grid-column>
       <tiny-grid-column type="index" width="80"></tiny-grid-column>
-      <tiny-grid-column field="name" title="公司名称"></tiny-grid-column>
+      <tiny-grid-column field="name" title="公司名称" tree-node></tiny-grid-column>
       <tiny-grid-column field="area" title="区域" :editor="{ component: 'input', autoselect: true }"></tiny-grid-column>
       <tiny-grid-column
         field="employees"
@@ -92,7 +92,7 @@ function copy(nodes1, nodes2) {
 
   return res
 }
-
+const increaseId = ref(30)
 const tableData = ref([
   {
     id: '1',
@@ -206,9 +206,11 @@ function insertEvent() {
   const row = {
     name: '新数据',
     isNew: true,
+    id: String(increaseId.value++),
     children: [
       {
-        name: '新数据-child'
+        name: '新数据-child',
+        id: String(increaseId.value++)
       }
     ]
   }

diff --git a/examples/sites/demos/pc/app/grid/tree-table/tree-grid-insert-delete-update.spec.js b/examples/sites/demos/pc/app/grid/tree-table/tree-grid-insert-delete-update.spec.js
@@ -10,15 +10,19 @@ test.describe('树表增删改功能', () => {
     await page.locator('.tiny-grid-toolbar').click()
     await page.getByRole('button', { name: '确定' }).click()
     await expect(page.getByRole('cell', { name: 'zzcd' })).toBeVisible()
-    await page.getByRole('row', { name: '1 新数据' }).locator('path').nth(1).click()
+    await page.getByRole('row', { name: '1 新数据' }).locator('.tiny-grid-checkbox__icon').first().click()
     await page.getByRole('button', { name: '移除选中' }).click()
     await expect(page.getByRole('cell', { name: 'zzcd' })).not.toBeVisible()
   })
 
   test('树表修改测试', async ({ page }) => {
     page.on('pageerror', (exception) => expect(exception).toBeNull())
     await page.goto('grid-tree-table#tree-table-tree-grid-insert-delete-update')
-    await page.getByRole('row', { name: '2 WWWW科技YX公司 华南区 500' }).getByRole('img').first().click()
+    await page
+      .getByRole('row', { name: '2 WWWW科技YX公司 华南区 500' })
+      .locator('.tiny-grid-tree-wrapper')
+      .first()
+      .click()
     await page.getByRole('row', { name: '3 WWWW科技股份有限子公司 华南区 720' }).getByText('华南区').first().click()
     await page.getByRole('row', { name: '3 WWWW科技股份有限子公司 720' }).getByRole('textbox').first().click()
     await page.getByRole('row', { name: '3 WWWW科技股份有限子公司 720' }).getByRole('textbox').fill('华南区ee')

diff --git a/examples/sites/demos/pc/app/grid/tree-table/tree-grid-insert-delete-update.vue b/examples/sites/demos/pc/app/grid/tree-table/tree-grid-insert-delete-update.vue
@@ -18,9 +18,9 @@
           </template>
         </tiny-grid-toolbar>
       </template>
-      <tiny-grid-column type="selection" width="100" tree-node></tiny-grid-column>
+      <tiny-grid-column type="selection" width="100"></tiny-grid-column>
       <tiny-grid-column type="index" width="80"></tiny-grid-column>
-      <tiny-grid-column field="name" title="公司名称"></tiny-grid-column>
+      <tiny-grid-column field="name" title="公司名称" tree-node></tiny-grid-column>
       <tiny-grid-column field="area" title="区域" :editor="{ component: 'input', autoselect: true }"></tiny-grid-column>
       <tiny-grid-column
         field="employees"
@@ -95,6 +95,7 @@ export default {
   },
   data() {
     return {
+      increaseId: 30,
       tableData: [
         {
           id: '1',
@@ -209,8 +210,10 @@ export default {
       const row = {
         name: '新数据',
         isNew: true,
+        id: String(this.increaseId++),
         children: [
           {
+            id: String(this.increaseId++),
             name: '新数据-child'
           }
         ]