@opentiny/vue-docs 3.24.6 → 3.26.0

package/demos/pc/app/container/basic-usage.vue

@@ -68,27 +68,27 @@ export default {
 }
 
 .demo-container .tiny-container :deep(.tiny-container__header) {
-  background-color: var(--tv-color-info-bg-light);
-  border: 3px solid var(--tv-color-border-container);
-  color: var(--tv-color-info-text);
+  background-color: var(--tv-color-info-bg-light, #0067d1);
+  border: 3px solid var(--tv-color-border-container, #fff);
+  color: var(--tv-color-info-text, #fff);
   line-height: 48px;
 }
 
 .demo-container .tiny-container :deep(.tiny-container__aside) {
-  background-color: var(--tv-color-error-bg-light);
-  border: 3px solid var(--tv-color-border-container);
-  color: var(--tv-color-error-text);
+  background-color: var(--tv-color-error-bg-light, #0067d180);
+  border: 3px solid var(--tv-color-border-container, #fff);
+  color: var(--tv-color-error-text, #fff);
 }
 
 .demo-container .tiny-container :deep(.tiny-container__main) {
-  background-color: var(--tv-color-warn-bg-light);
-  border: 3px solid var(--tv-color-border-container);
+  background-color: var(--tv-color-warn-bg-light, #0067d133);
+  border: 3px solid var(--tv-color-border-container, #fff);
   color: var(--tv-color-warn-text);
 }
 
 .demo-container .tiny-container :deep(.tiny-container__footer) {
-  background-color: var(--tv-color-success-bg-light);
-  border: 3px solid var(--tv-color-border-container);
+  background-color: var(--tv-color-success-bg-light, #f0f7ff);
+  border: 3px solid var(--tv-color-border-container, #fff);
   color: var(--tv-color-success-text);
 }
 .demo-center {

package/demos/pc/app/container/custom-with-height-composition-api.vue

@@ -40,26 +40,26 @@ const headerHeight = ref(80)
 }
 
 .demo-container .tiny-container :deep(.tiny-container__header) {
-  background-color: var(--tv-color-info-bg-light);
-  border: 3px solid var(--tv-color-border-container);
+  background-color: var(--tv-color-info-bg-light, #0067d1);
+  border: 3px solid var(--tv-color-border-container, #fff);
   color: var(--tv-color-info-text);
 }
 
 .demo-container .tiny-container :deep(.tiny-container__aside) {
-  background-color: var(--tv-color-error-bg-light);
-  border: 3px solid var(--tv-color-border-container);
+  background-color: var(--tv-color-error-bg-light, #0067d180);
+  border: 3px solid var(--tv-color-border-container, #fff);
   color: var(--tv-color-error-text);
 }
 
 .demo-container .tiny-container :deep(.tiny-container__main) {
-  background-color: var(--tv-color-warn-bg-light);
-  border: 3px solid var(--tv-color-border-container);
+  background-color: var(--tv-color-warn-bg-light, #0067d133);
+  border: 3px solid var(--tv-color-border-container, #fff);
   color: var(--tv-color-warn-text);
 }
 
 .demo-container .tiny-container :deep(.tiny-container__footer) {
-  background-color: var(--tv-color-success-bg-light);
-  border: 3px solid var(--tv-color-border-container);
+  background-color: var(--tv-color-success-bg-light, #f0f7ff);
+  border: 3px solid var(--tv-color-border-container, #fff);
   color: var(--tv-color-success-text);
 }
 

package/demos/pc/app/container/custom-with-height.vue

@@ -49,26 +49,26 @@ export default {
 }
 
 .demo-container .tiny-container :deep(.tiny-container__header) {
-  background-color: var(--tv-color-info-bg-light);
-  border: 3px solid var(--tv-color-border-container);
-  color: var(--tv-color-info-text);
+  background-color: var(--tv-color-info-bg-light, #0067d1);
+  border: 3px solid var(--tv-color-border-container, #fff);
+  color: var(--tv-color-info-text, #fff);
 }
 
 .demo-container .tiny-container :deep(.tiny-container__aside) {
-  background-color: var(--tv-color-error-bg-light);
-  border: 3px solid var(--tv-color-border-container);
-  color: var(--tv-color-error-text);
+  background-color: var(--tv-color-error-bg-light, #0067d180);
+  border: 3px solid var(--tv-color-border-container, #fff);
+  color: var(--tv-color-error-text, #fff);
 }
 
 .demo-container .tiny-container :deep(.tiny-container__main) {
-  background-color: var(--tv-color-warn-bg-light);
-  border: 3px solid var(--tv-color-border-container);
+  background-color: var(--tv-color-warn-bg-light, #0067d133);
+  border: 3px solid var(--tv-color-border-container, #fff);
   color: var(--tv-color-warn-text);
 }
 
 .demo-container .tiny-container :deep(.tiny-container__footer) {
-  background-color: var(--tv-color-success-bg-light);
-  border: 3px solid var(--tv-color-border-container);
+  background-color: var(--tv-color-success-bg-light, #f0f7ff);
+  border: 3px solid var(--tv-color-border-container, #fff);
   color: var(--tv-color-success-text);
 }
 

package/demos/pc/app/date-panel/custom-week.spec.ts

@@ -24,7 +24,7 @@ test('[DatePanel] 测试周次序号', async ({ page }) => {
   await page.locator('div:nth-child(2) > .tiny-date-range-picker__header > button:nth-child(2)').click()
   await expect(page.getByText('12w')).toBeVisible()
 
-  await page.getByText('13').nth(1).click()
-  await page.getByText('17').nth(2).click()
+  await page.locator('#custom-weeks').getByText('13').nth(1).click()
+  await page.locator('#custom-weeks').getByText('17').nth(2).click()
   await expect(page.locator('.value1')).toHaveText('[ "2025-02-13", "2025-02-17" ]')
 })

package/demos/pc/app/dialog-select/nest-grid-single.spec.ts

@@ -0,0 +1,40 @@
+import { test, expect } from '@playwright/test'
+
+test('dialogSelect 表格单选', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('dialog-select#nest-grid-single')
+
+  await page.locator('#nest-grid-single').getByRole('button', { name: '打开窗口' }).click()
+
+  await page.locator('.tiny-grid-body__row').first().waitFor()
+  let rows
+  rows = await page.locator('.tiny-grid-body__row').all()
+  for (const row of rows) {
+    const checked = await row.locator('input[type="radio"]').isChecked()
+    expect(checked).toBe(false)
+  }
+
+  await page.getByRole('row', { name: 'GFD 科技有限公司 福建 福州' }).locator('path').nth(1).click()
+
+  rows = await page.locator('.tiny-grid-body__row').all()
+  for (let i = 0; i < rows.length; i++) {
+    const checked = await rows[i].locator('input[type="radio"]').first().isChecked()
+    if (i === 0) {
+      expect(checked).toBe(true)
+    } else {
+      expect(checked).toBe(false)
+    }
+  }
+
+  await page.getByRole('row', { name: 'WWW 科技有限公司 广东 深圳' }).locator('path').nth(1).click()
+
+  rows = await page.locator('.tiny-grid-body__row').all()
+  for (let i = 0; i < rows.length; i++) {
+    const checked = await rows[i].locator('input[type="radio"]').first().isChecked()
+    if (i === 1) {
+      expect(checked).toBe(true)
+    } else {
+      expect(checked).toBe(false)
+    }
+  }
+})

package/demos/pc/app/dialog-select/nest-tree-multi.spec.ts

@@ -0,0 +1,53 @@
+import { test, expect } from '@playwright/test'
+
+test('dialogSelect 树多选', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('dialog-select#nest-tree-multi')
+  await page.locator('#nest-tree-multi').getByRole('button', { name: '打开窗口', exact: true }).click()
+
+  const nodeContent = await page.locator('.tiny-tree-node__content-left label').nth(1)
+
+  const iconNode = await nodeContent.getAttribute('class')
+
+  expect(iconNode?.includes('tiny-radio')).toBe(false)
+  expect(iconNode?.includes('tiny-checkbox')).toBe(true)
+
+  let isChecked
+
+  isChecked = await page
+    .getByRole('treeitem', { name: '三级 9' })
+    .locator('.tiny-checkbox input[type="checkbox"]')
+    .isChecked()
+  expect(isChecked).toBeFalsy()
+
+  let current
+  current = await page.getByRole('treeitem', { name: '三级 9' }).locator('path').nth(1)
+  await current.click()
+
+  isChecked = await page
+    .getByRole('treeitem', { name: '三级 9' })
+    .locator('.tiny-checkbox input[type="checkbox"]')
+    .isChecked()
+  expect(isChecked).toBeTruthy()
+
+  await page
+    .locator('div')
+    .filter({ hasText: /^一级 1二级 4三级 8三级 9暂无数据$/ })
+    .getByRole('img')
+    .nth(3)
+    .click()
+
+  isChecked = await page
+    .getByRole('treeitem', { name: '三级 9' })
+    .locator('.tiny-checkbox input[type="checkbox"]')
+    .isChecked()
+  expect(isChecked).toBeFalsy()
+
+  await page.getByRole('treeitem', { name: '三级 9' }).locator('path').nth(1).click()
+
+  isChecked = await page
+    .getByRole('treeitem', { name: '三级 9' })
+    .locator('.tiny-checkbox input[type="checkbox"]')
+    .isChecked()
+  expect(isChecked).toBeTruthy()
+})

package/demos/pc/app/dialog-select/nest-tree-single.spec.ts

@@ -0,0 +1,25 @@
+import { test, expect } from '@playwright/test'
+
+test('dialogSelect 树单选', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('dialog-select#nest-tree-single')
+  await page.locator('#nest-tree-single').getByRole('button', { name: '打开窗口' }).click()
+
+  const nodeContent = await page.locator('.tiny-tree-node__content-left label').nth(1)
+
+  const iconNode = await nodeContent.getAttribute('class')
+
+  expect(iconNode?.includes('tiny-radio')).toBe(true)
+  expect(iconNode?.includes('tiny-checkbox')).toBe(false)
+
+  let current
+  current = await page.getByText('201一级')
+  await current.click()
+  expect(await current.locator('input[type="radio"]').isChecked()).toBe(true)
+
+  current = await page.getByRole('treeitem', { name: '二级 6' }).locator('label')
+  await current.click()
+  expect(await current.locator('input[type="radio"]').isChecked()).toBe(true)
+  current = await page.getByText('201一级')
+  expect(await current.locator('input[type="radio"]').isChecked()).toBe(false)
+})

package/demos/pc/app/dialog-select/set-selection.spec.ts

@@ -0,0 +1,20 @@
+import { test, expect } from '@playwright/test'
+
+test('dialogSelect 设置多选状态', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('dialog-select#set-selection')
+  await page.locator('#set-selection').getByRole('button', { name: '打开窗口' }).click()
+  await page.getByRole('button', { name: 'Close' }).click()
+  await page.getByRole('button', { name: '切换第二行选中状态' }).click()
+  await page.locator('#set-selection').getByRole('button', { name: '打开窗口' }).click()
+
+  const trs = await page.locator('.tiny-grid table tbody tr').all()
+  for (let i = 0; i < trs.length; i++) {
+    const classes = await trs[i].getAttribute('class')
+    if (i === 1) {
+      expect(classes?.includes('row__selected')).toBeTruthy()
+    } else {
+      expect(classes?.includes('row__selected')).toBeFalsy()
+    }
+  }
+})

package/demos/pc/app/file-upload/before-upload-limit-composition-api.vue

@@ -1,7 +1,7 @@
 <template>
   <tiny-file-upload ref="uploadRef" :action="action" :file-list="fileList" :before-upload="beforeAvatarUpload">
     <template #trigger>
-      <tiny-button>选取文件</tiny-button>
+      <tiny-button>点击上传</tiny-button>
     </template>
   </tiny-file-upload>
 </template>

package/demos/pc/app/file-upload/before-upload-limit.spec.ts

@@ -9,7 +9,7 @@ test('定义上传前限制', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('file-upload#before-upload-limit')
 
-  const upload = page.getByRole('button', { name: '选取文件' })
+  const upload = page.getByRole('button', { name: '点击上传' })
   const modal = page.locator('.tiny-modal').nth(1)
   const modalCancel = page.getByRole('button', { name: '取消' })
   const lists = page.locator('.tiny-upload-list__item')

package/demos/pc/app/file-upload/before-upload-limit.vue

@@ -1,7 +1,7 @@
 <template>
   <tiny-file-upload ref="upload" :action="action" :file-list="fileList" :before-upload="beforeAvatarUpload">
     <template #trigger>
-      <tiny-button>选取文件</tiny-button>
+      <tiny-button>点击上传</tiny-button>
     </template>
   </tiny-file-upload>
 </template>

package/demos/pc/app/file-upload/custom-trigger-composition-api.vue

@@ -1,7 +1,7 @@
 <template>
   <tiny-file-upload ref="uploadRef" :action="action">
     <template #trigger>
-      <tiny-button>我是触发源</tiny-button>
+      <tiny-button>点击上传</tiny-button>
     </template>
   </tiny-file-upload>
 </template>

package/demos/pc/app/file-upload/custom-trigger.spec.ts

@@ -6,5 +6,5 @@ test('触发源插槽', async ({ page }) => {
 
   const upload = page.locator('.tiny-upload')
 
-  await expect(upload).toHaveText('我是触发源')
+  await expect(upload).toHaveText('点击上传')
 })

package/demos/pc/app/file-upload/custom-trigger.vue

@@ -1,7 +1,7 @@
 <template>
   <tiny-file-upload ref="upload" :action="action">
     <template #trigger>
-      <tiny-button>我是触发源</tiny-button>
+      <tiny-button>点击上传</tiny-button>
     </template>
   </tiny-file-upload>
 </template>

package/demos/pc/app/file-upload/custom-upload-tip-composition-api.vue

@@ -8,7 +8,7 @@
     :re-upload-tip="reUploadTip"
   >
     <template #trigger>
-      <tiny-button>选取文件</tiny-button>
+      <tiny-button>点击上传</tiny-button>
     </template>
     <template #tip>
       <div class="tiny-upload__tip">只能上传 jpg/png 文件，且不超过 500 kb</div>

package/demos/pc/app/file-upload/custom-upload-tip.vue

@@ -8,7 +8,7 @@
     :re-upload-tip="reUploadTip"
   >
     <template #trigger>
-      <tiny-button>选取文件</tiny-button>
+      <tiny-button>点击上传</tiny-button>
     </template>
     <template #tip>
       <div class="tiny-upload__tip">只能上传 jpg/png 文件，且不超过 500 kb</div>

package/demos/pc/app/file-upload/form-validation-composition-api.vue

@@ -17,7 +17,7 @@
         @remove="handleRemove"
       >
         <template #trigger>
-          <tiny-button>选取文件</tiny-button>
+          <tiny-button>点击上传</tiny-button>
         </template>
         <template #tip>
           <div class="tiny-upload__tip">只能上传 jpg/png 文件</div>

package/demos/pc/app/file-upload/form-validation.vue

@@ -18,7 +18,7 @@
           @remove="handleRemove"
         >
           <template #trigger>
-            <tiny-button>选取文件</tiny-button>
+            <tiny-button>点击上传</tiny-button>
           </template>
           <template #tip>
             <div class="tiny-upload__tip">只能上传 jpg/png 文件</div>

package/demos/pc/app/file-upload/image-size-composition-api.vue

@@ -7,7 +7,7 @@
     :before-upload="beforeUpload"
   >
     <template #trigger>
-      <tiny-button>选取文件</tiny-button>
+      <tiny-button>点击上传</tiny-button>
     </template>
     <template #tip>
       <div class="tiny-upload__tip">只允许上传 image 类型文件</div>

package/demos/pc/app/file-upload/image-size.spec.ts

@@ -9,7 +9,7 @@ test('获取图片的原始尺寸', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('file-upload#image-size')
 
-  const upload = page.getByRole('button', { name: '选取文件' })
+  const upload = page.getByRole('button', { name: '点击上传' })
   const [fileChooser] = await Promise.all([page.waitForEvent('filechooser'), upload.click()])
   const modal = page.locator('.tiny-modal')
 

package/demos/pc/app/file-upload/image-size.vue

@@ -1,7 +1,7 @@
 <template>
   <tiny-file-upload accept="image/*" ref="upload" :action="action" :file-list="fileList" :before-upload="beforeUpload">
     <template #trigger>
-      <tiny-button>选取文件</tiny-button>
+      <tiny-button>点击上传</tiny-button>
     </template>
     <template #tip>
       <div class="tiny-upload__tip">只允许上传 image 类型文件</div>

package/demos/pc/app/file-upload/multiple-file-composition-api.vue

@@ -1,7 +1,7 @@
 <template>
   <tiny-file-upload :action="action" :multiple="true">
     <template #trigger>
-      <tiny-button>选取文件</tiny-button>
+      <tiny-button>点击上传</tiny-button>
     </template>
   </tiny-file-upload>
 </template>

package/demos/pc/app/file-upload/multiple-file.spec.ts

@@ -9,7 +9,7 @@ test('文件多选', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('file-upload#multiple-file')
 
-  const upload = page.getByRole('button', { name: '选取文件' })
+  const upload = page.getByRole('button', { name: '点击上传' })
   const lists = page.locator('.tiny-upload-list__item')
   const [fileChooser] = await Promise.all([page.waitForEvent('filechooser'), upload.click()])
   const input = page.locator('.tiny-upload__input')

package/demos/pc/app/file-upload/multiple-file.vue

@@ -1,7 +1,7 @@
 <template>
   <tiny-file-upload :action="action" :multiple="true">
     <template #trigger>
-      <tiny-button>选取文件</tiny-button>
+      <tiny-button>点击上传</tiny-button>
     </template>
   </tiny-file-upload>
 </template>

package/demos/pc/app/file-upload/prevent-delete-file-composition-api.vue

@@ -1,7 +1,7 @@
 <template>
   <tiny-file-upload ref="uploadRef" :action="action" :file-list="fileList" :before-remove="beforeRemove">
     <template #trigger>
-      <tiny-button>选取文件</tiny-button>
+      <tiny-button>点击上传</tiny-button>
     </template>
   </tiny-file-upload>
 </template>

package/demos/pc/app/file-upload/prevent-delete-file.vue

@@ -1,7 +1,7 @@
 <template>
   <tiny-file-upload ref="upload" :action="action" :file-list="fileList" :before-remove="beforeRemove">
     <template #trigger>
-      <tiny-button>选取文件</tiny-button>
+      <tiny-button>点击上传</tiny-button>
     </template>
   </tiny-file-upload>
 </template>

package/demos/pc/app/file-upload/upload-request-composition-api.vue

@@ -8,7 +8,7 @@
     :before-upload="beforeUpload"
   >
     <template #trigger>
-      <tiny-button>选取文件</tiny-button>
+      <tiny-button>点击上传</tiny-button>
     </template>
   </tiny-file-upload>
 </template>

package/demos/pc/app/file-upload/upload-request.spec.ts

@@ -12,7 +12,7 @@ test.describe('设置上传请求', () => {
     page.on('pageerror', (exception) => expect(exception).toBeNull())
     await page.goto('file-upload#upload-request')
 
-    const upload = page.getByRole('button', { name: '选取文件' })
+    const upload = page.getByRole('button', { name: '点击上传' })
     const [fileChooser] = await Promise.all([page.waitForEvent('filechooser'), upload.click()])
     await fileChooser.setFiles(path1)
     page.on('requestfailed', (request) => {
@@ -25,7 +25,7 @@ test.describe('设置上传请求', () => {
     page.on('pageerror', (exception) => expect(exception).toBeNull())
     await page.goto('file-upload#upload-request')
 
-    const upload = page.getByRole('button', { name: '选取文件' })
+    const upload = page.getByRole('button', { name: '点击上传' })
     const [fileChooser] = await Promise.all([page.waitForEvent('filechooser'), upload.click()])
     await fileChooser.setFiles(path1)
     page.on('requestfailed', (request) => {

package/demos/pc/app/file-upload/upload-request.vue

@@ -8,7 +8,7 @@
     :before-upload="beforeUpload"
   >
     <template #trigger>
-      <tiny-button>选取文件</tiny-button>
+      <tiny-button>点击上传</tiny-button>
     </template>
   </tiny-file-upload>
 </template>

package/demos/pc/app/grid/base/basic-usage-composition-api.vue

@@ -1,17 +1,6 @@
 <template>
   <div>
-    <tiny-grid
-      :data="tableData"
-      :edit-config="{ trigger: 'click', mode: 'cell', showStatus: true }"
-      height="420px"
-      :tiny_mcp_config="{
-        server,
-        business: {
-          id: 'company-information',
-          description: '公司人员信息表'
-        }
-      }"
-    >
+    <tiny-grid :data="tableData" :edit-config="{ trigger: 'click', mode: 'cell', showStatus: true }" height="420px">
       <tiny-grid-column type="index" width="60"></tiny-grid-column>
       <tiny-grid-column type="selection" width="60"></tiny-grid-column>
       <tiny-grid-column field="company" title="公司名称"></tiny-grid-column>
@@ -25,7 +14,6 @@
 <script setup>
 import { ref } from 'vue'
 import { TinyGrid, TinyGridColumn } from '@opentiny/vue'
-import { useNextServer } from '@opentiny/next-vue'
 
 // 初始化表格数据
 const _table = [
@@ -48,8 +36,4 @@ const _table = [
 ]
 
 const tableData = ref(_table)
-
-const { server } = useNextServer({
-  serverInfo: { name: 'company-information', version: '1.0.0' }
-})
 </script>

package/demos/pc/app/grid/custom/column-fixed.spec.js

@@ -3,10 +3,11 @@ import { test, expect } from '@playwright/test'
 test('列冻结', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   const custom = page.locator('.tiny-grid-custom')
+  const demo = page.locator('#custom-column-fixed')
   await page.goto('grid-custom#custom-column-fixed')
   await page.locator('.tiny-grid-custom__setting-btn').click()
   await custom.getByRole('row', { name: '员工数 ' }).getByTitle('未冻结').getByRole('img').click()
   await custom.getByRole('row', { name: '员工数' }).getByTitle('左冻结').getByRole('img').click()
   await page.getByRole('button', { name: '确定' }).click()
-  await expect(page.getByRole('cell', { name: '员工数' })).toHaveCSS('right', '0px')
+  await expect(demo.locator('.tiny-grid-header__row th').nth(3)).toHaveText(/员工数/)
 })

package/demos/pc/app/grid/custom/page-size.spec.js

@@ -9,5 +9,5 @@ test('分页条数', async ({ page }) => {
   await page.getByText('其他设置', { exact: true }).click()
   await page.locator('label').filter({ hasText: '5' }).locator('path').nth(1).click()
   await page.getByRole('button', { name: '确定' }).click()
-  await expect(demo.locator('.tiny-grid-body__row')).toHaveCount(5)
+  await expect(demo.locator('.tiny-grid-body__row:visible')).toHaveCount(5)
 })

package/demos/pc/app/grid/data-source/auto-load.spec.js

@@ -4,7 +4,6 @@ test('自动加载数据', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('grid-data-source#data-source-auto-load')
   // 判断 auto-load 为 false 时不加载数据
-  await page.getByRole('paragraph').nth(1).click()
   const demo = page.locator('#data-source-auto-load')
   await expect(demo.getByText('暂无数据')).toHaveText('暂无数据')
 })

package/demos/pc/app/grid/data-source/request-service.spec.js

@@ -6,5 +6,5 @@ test('开启服务请求', async ({ page }) => {
   await page.getByRole('button', { name: '筛选华南区数据' }).click()
 
   // 判断筛选华南区数据成功
-  await expect(page.locator('.tiny-grid-body__row')).toHaveCount(3)
+  await expect(page.locator('.tiny-grid-body__row:visible')).toHaveCount(3)
 })

package/demos/pc/app/grid/data-source/static-data.spec.js

@@ -14,5 +14,5 @@ test('绑定静态数据', async ({ page }) => {
 
   // 改变 data 数据引用地址
   await page.getByRole('button', { name: '改变 tableData 引用地址' }).click()
-  await expect(page.locator('.tiny-grid-body__row')).toHaveCount(2)
+  await expect(page.locator('.tiny-grid-body__row:visible')).toHaveCount(2)
 })

package/demos/pc/app/grid/dynamically-columns/dynamically-columns.spec.js

@@ -3,7 +3,8 @@ import { test, expect } from '@playwright/test'
 test('根据日期动态生成列', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('grid-dynamically-columns#dynamically-columns-dynamically-columns')
-  await page.getByRole('textbox').nth(1).click()
+  const demo = page.locator('#dynamically-columns-dynamically-columns')
+  await demo.locator('.tiny-picker.tiny-date-container').click()
   await page.getByText('12 月').first().click()
   await page.getByText('2 月').nth(2).click()
   await expect(page.getByRole('cell', { name: '12' }).first()).toBeVisible()