@opentiny/vue-docs 2.2.18 → 2.2.19

package/demos/pc/app/grid/edit/grid-equals.spec.js

@@ -0,0 +1,10 @@
+import { test, expect } from '@playwright/test'
+
+test('自定义比较方法', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('grid-edit#edit-grid-equals')
+  await page.getByText('800').click()
+  await page.getByRole('row', { name: '1 2014-04-30 00:56:00' }).getByRole('textbox').fill('800')
+  await page.getByRole('cell', { name: '人数' }).locator('div').first().click()
+  await expect(page.locator('.tiny-grid .col__dirty')).toHaveCount(0)
+})

package/demos/pc/app/grid/edit/grid-equals.vue

@@ -0,0 +1,60 @@
+<template>
+  <tiny-grid :data="tableData" :edit-config="{ trigger: 'click', mode: 'cell' }">
+    <tiny-grid-column type="index" width="60"></tiny-grid-column>
+    <tiny-grid-column field="created_date" title="创建时间"></tiny-grid-column>
+    <tiny-grid-column
+      field="employees"
+      title="人数"
+      :editor="{ component: 'input' }"
+      :equals="employeesEquals"
+    ></tiny-grid-column>
+    <tiny-grid-column field="introduction" title="公司简介"></tiny-grid-column>
+  </tiny-grid>
+</template>
+
+<script>
+import { Grid, GridColumn } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyGrid: Grid,
+    TinyGridColumn: GridColumn
+  },
+  methods: {
+    employeesEquals({ value, originalValue }) {
+      // 如果数字相等就返回true
+      return Number(value) === Number(originalValue)
+    }
+  },
+  data() {
+    return {
+      tableData: [
+        {
+          id: '1',
+          created_date: '2014-04-30 00:56:00',
+          employees: 800,
+          introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。'
+        },
+        {
+          id: '2',
+          created_date: '2016-07-08 12:36:22',
+          employees: 300,
+          introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。'
+        },
+        {
+          id: '3',
+          created_date: '2014-02-14 14:14:14',
+          employees: 1300,
+          introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。'
+        },
+        {
+          id: '4',
+          created_date: '2013-01-13 13:13:13',
+          employees: 360,
+          introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。'
+        }
+      ]
+    }
+  }
+}
+</script>

package/demos/pc/app/grid/edit/has-row-change.spec.js

@@ -7,7 +7,7 @@ test('检查数据是否改变', async ({ page }) => {
   await page.getByRole('row', { name: '1 保存' }).locator('input[type="text"]').fill('sdf')
   await page.getByRole('row', { name: '1 保存' }).getByRole('button', { name: '保存' }).click()
   await expect(page.getByText('保存成功！')).toBeVisible()
-  await page.getByRole('button', { name: '确认' }).click()
+  await page.getByRole('button', { name: '确定' }).click()
   await page
     .getByRole('row', {
       name: '2 WWWW科技YX公司 华南区 深圳福田区 公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。 保存'
@@ -15,5 +15,5 @@ test('检查数据是否改变', async ({ page }) => {
     .getByRole('button', { name: '保存' })
     .click()
   await expect(page.getByText('当前数据未改变！')).toBeVisible()
-  await page.getByRole('button', { name: '确认' }).click()
+  await page.getByRole('button', { name: '确定' }).click()
 })

package/demos/pc/app/grid/edit/trigger-mode-hm-editing-composition-api.vue

@@ -92,37 +92,37 @@ const tableData = ref([
 ])
 const theGridRef = ref('theGridRef')
 
-function editRowEvent(row) {
+const getActiveRow = () => {
+  const activedRowIndex = theGridRef.value.getActiveRow()
+
+  activedRow.value = activedRowIndex ? activedRowIndex.rowIndex : ''
+}
+
+const editRowEvent = (row) => {
   if (row.name === 'RFV有限责任公司') {
     // 只激活区域单元格编辑
     theGridRef.value.setActiveCell(row, 'area').then(() => {
-      this.getActiveRow()
+      getActiveRow()
     })
   } else {
     // mode: 'cell' 时默认激活第一个单元格
     theGridRef.value.setActiveRow(row).then(() => {
-      this.getActiveRow()
+      getActiveRow()
     })
   }
 }
 
-function saveRowEvent() {
+const saveRowEvent = () => {
   theGridRef.value.clearActived().then(() => {
     getActiveRow()
   })
 }
 
-function cancelRowEvent() {
+const cancelRowEvent = () => {
   theGridRef.value.clearActived().then(() => {
     getActiveRow()
   })
 }
-
-function getActiveRow() {
-  const activedRowIndex = theGridRef.value.getActiveRow()
-
-  activedRow.value = activedRowIndex ? activedRowIndex.rowIndex : ''
-}
 </script>
 
 <style scoped>

package/demos/pc/app/grid/editor/mutil-render.spec.js

@@ -4,7 +4,7 @@ test('Grid-编辑器-下拉多选', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('grid-editor#editor-mutil-render')
   await page.getByText('华中区;华南区').click()
-  await page.locator('.tiny-input__suffix-inner > .tiny-svg > .st0').click()
+  await page.locator('.tiny-input__suffix-inner > .tiny-svg').click()
   await page.locator('li').filter({ hasText: '华东区' }).locator('span').nth(2).click()
   await page.getByRole('cell', { name: '创建时间' }).click()
   await expect(page.locator('.tiny-grid-body__row').first()).toContainText('华中区;华东区;华南区')

package/demos/pc/app/grid/event/get-row-method.spec.js

@@ -14,23 +14,23 @@ test('获取表格行方法', async ({ page }) => {
   await expect(
     page.getByText('当前行数据是：{"id":"1","name":"GFD科技YX公司","area":"华东区","address":"福州","introduction":"')
   ).toBeVisible()
-  await page.getByRole('button', { name: '确认' }).click()
+  await page.getByRole('button', { name: '确定' }).click()
   await page.getByRole('button', { name: '当前行号' }).click()
 
   await expect(page.getByText('当前选中行号是：0')).toBeVisible()
-  await page.getByRole('button', { name: '确认' }).click()
+  await page.getByRole('button', { name: '确定' }).click()
   await page.getByRole('button', { name: 'Radio单选选中行' }).click()
 
   await expect(
     page.getByText('单选选中行数据是：{"id":"1","name":"GFD科技YX公司","area":"华东区","address":"福州","introduction"')
   ).toBeVisible()
-  await page.getByRole('button', { name: '确认' }).click()
+  await page.getByRole('button', { name: '确定' }).click()
   await page.getByRole('button', { name: 'rowId获取当前行' }).click()
 
   await expect(
     page.getByText('根据 rowId 获取的当前行：{"id":"1","name":"GFD科技YX公司","area":"华东区","address":"福州","introd')
   ).toBeVisible()
-  await page.getByRole('button', { name: '确认' }).click()
+  await page.getByRole('button', { name: '确定' }).click()
   await page.getByRole('button', { name: 'tr元素获取行信息' }).click()
 
   await expect(

package/demos/pc/app/grid/filter/server-filter.spec.js

@@ -3,7 +3,7 @@ import { test, expect } from '@playwright/test'
 test('服务端过滤', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('grid-filter#filter-server-filter')
-  await page.waitForTimeout(500)
+  await page.waitForTimeout(3000)
   await page.getByRole('cell', { name: '城市' }).getByRole('img').first().click()
   await page.locator('li').filter({ hasText: '深圳' }).click()
   await page.getByRole('button', { name: '确定' }).click()

package/demos/pc/app/grid/fixed/left-fixed.vue

@@ -1,5 +1,5 @@
 <template>
-  <tiny-grid border :data="tableData">
+  <tiny-grid :data="tableData">
     <tiny-grid-column type="index" width="60" fixed="left"></tiny-grid-column>
     <tiny-grid-column type="selection" width="60" fixed="left"></tiny-grid-column>
     <tiny-grid-column field="name" title="公司名称" width="500"></tiny-grid-column>

package/demos/pc/app/grid/large-data/column-anchor.vue

@@ -0,0 +1,132 @@
+<template>
+  <tiny-grid
+    :data="tableData"
+    column-min-width="100"
+    auto-resize
+    :column-anchor="columnAnchor"
+    :optimization="{ scrollX: { gt: 20 } }"
+  >
+    <tiny-grid-column field="name0" title="名称0" sortable fixed="left"></tiny-grid-column>
+    <tiny-grid-column field="name1" title="名称1" sortable fixed="left"></tiny-grid-column>
+    <tiny-grid-column field="name2" title="名称2" sortable fixed="left"></tiny-grid-column>
+    <tiny-grid-column field="name3" title="名称3" sortable></tiny-grid-column>
+    <tiny-grid-column field="name4" title="名称4" sortable></tiny-grid-column>
+    <tiny-grid-column field="name5" title="名称5" sortable></tiny-grid-column>
+    <tiny-grid-column field="name6" title="名称6" sortable></tiny-grid-column>
+    <tiny-grid-column field="name7" title="名称7" sortable></tiny-grid-column>
+    <tiny-grid-column field="name8" title="名称8" sortable></tiny-grid-column>
+    <tiny-grid-column field="name9" title="名称9" sortable></tiny-grid-column>
+    <tiny-grid-column field="name10" title="名称10" sortable></tiny-grid-column>
+    <tiny-grid-column field="name" title="名称" sortable></tiny-grid-column>
+    <tiny-grid-column field="name11" title="名称11" sortable></tiny-grid-column>
+    <tiny-grid-column field="name12" title="名称12" sortable></tiny-grid-column>
+    <tiny-grid-column field="name13" title="名称13" sortable></tiny-grid-column>
+    <tiny-grid-column field="name14" title="名称14" sortable></tiny-grid-column>
+    <tiny-grid-column field="name15" title="名称15" sortable></tiny-grid-column>
+    <tiny-grid-column field="name16" title="名称16" sortable></tiny-grid-column>
+    <tiny-grid-column field="name17" title="名称17" sortable></tiny-grid-column>
+    <tiny-grid-column field="name18" title="名称18" sortable></tiny-grid-column>
+    <tiny-grid-column field="name19" title="名称19" sortable></tiny-grid-column>
+    <tiny-grid-column field="name20" title="名称20" sortable></tiny-grid-column>
+    <tiny-grid-column field="employees" title="员工数" sortable></tiny-grid-column>
+    <tiny-grid-column field="name21" title="名称21" sortable></tiny-grid-column>
+    <tiny-grid-column field="name22" title="名称22" sortable></tiny-grid-column>
+    <tiny-grid-column field="name23" title="名称23" sortable></tiny-grid-column>
+    <tiny-grid-column field="name24" title="名称24" sortable></tiny-grid-column>
+    <tiny-grid-column field="name25" title="名称25" sortable></tiny-grid-column>
+    <tiny-grid-column field="name26" title="名称26" sortable></tiny-grid-column>
+    <tiny-grid-column field="name27" title="名称27" sortable></tiny-grid-column>
+    <tiny-grid-column field="name28" title="名称28" sortable></tiny-grid-column>
+    <tiny-grid-column field="name29" title="名称29" sortable></tiny-grid-column>
+    <tiny-grid-column field="name30" title="名称30" sortable></tiny-grid-column>
+    <tiny-grid-column field="address" title="地址"></tiny-grid-column>
+    <tiny-grid-column field="name31" title="名称31" sortable></tiny-grid-column>
+    <tiny-grid-column field="name32" title="名称32" sortable></tiny-grid-column>
+    <tiny-grid-column field="name33" title="名称33" sortable></tiny-grid-column>
+    <tiny-grid-column field="name34" title="名称34" sortable></tiny-grid-column>
+    <tiny-grid-column field="name35" title="名称35" sortable></tiny-grid-column>
+    <tiny-grid-column field="name36" title="名称36" sortable></tiny-grid-column>
+    <tiny-grid-column field="name37" title="名称37" sortable></tiny-grid-column>
+    <tiny-grid-column field="name38" title="名称38" sortable></tiny-grid-column>
+    <tiny-grid-column field="name39" title="名称39" sortable></tiny-grid-column>
+    <tiny-grid-column field="name40" title="名称40" sortable></tiny-grid-column>
+    <tiny-grid-column field="name41" title="名称41" sortable></tiny-grid-column>
+    <tiny-grid-column field="name42" title="名称42" sortable></tiny-grid-column>
+    <tiny-grid-column field="name43" title="名称43" sortable></tiny-grid-column>
+    <tiny-grid-column field="name44" title="名称44" sortable></tiny-grid-column>
+    <tiny-grid-column field="name45" title="名称45" sortable></tiny-grid-column>
+    <tiny-grid-column field="name46" title="名称46" sortable></tiny-grid-column>
+    <tiny-grid-column field="name47" title="名称47" sortable></tiny-grid-column>
+    <tiny-grid-column field="introduction" title="公司简介" show-overflow></tiny-grid-column>
+    <tiny-grid-column field="name48" title="名称48" sortable fixed="right"></tiny-grid-column>
+    <tiny-grid-column field="name49" title="名称49" sortable fixed="right"></tiny-grid-column>
+  </tiny-grid>
+</template>
+
+<script>
+import { Grid, GridColumn } from '@opentiny/vue'
+import { IconMarkOn } from '@opentiny/vue-icon'
+
+export default {
+  components: {
+    TinyGrid: Grid,
+    TinyGridColumn: GridColumn
+  },
+  data() {
+    return {
+      columnAnchor: [
+        'name',
+        'address',
+        ['introduction', '简单介绍'],
+        [
+          'employees',
+          [
+            '雇员数量-自定义渲染',
+            ({ h, anchor: { active, field, label }, action }) =>
+              h(
+                'div',
+                {
+                  class: { 'tiny-grid__column-anchor-item': true, 'tiny-grid__column-anchor-item--active': active },
+                  on: { click: (e) => action(field, e) }
+                },
+                [active ? h(IconMarkOn(), { class: 'tiny-grid__column-anchor-item-icon' }) : null, h('span', label)]
+              )
+          ]
+        ]
+      ],
+      tableData: [
+        {
+          id: '1',
+          name: 'GFD科技有限公司',
+          address: '福州',
+          introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。',
+          employees: 800,
+          name0: '1-name-0',
+          name1: '1-name-1',
+          name2: '1-name-2'
+        },
+        {
+          id: '2',
+          name: 'WWW科技有限公司',
+          address: '深圳福田区',
+          introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。',
+          employees: 300,
+          name0: '2-name-0',
+          name1: '2-name-1',
+          name2: '2-name-2'
+        },
+        {
+          id: '3',
+          name: 'RFV有限责任公司',
+          address: '中山市',
+          introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。',
+          employees: 1300,
+          name0: '3-name-0',
+          name1: '3-name-1',
+          name2: '3-name-2'
+        }
+      ]
+    }
+  }
+}
+</script>

package/demos/pc/app/grid/large-data/scroll-to.spec.js

@@ -3,7 +3,7 @@ import { test, expect } from '@playwright/test'
 test('滚动到指定位置', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('grid-large-data#large-data-scroll-to')
-  await page.waitForTimeout(1000)
+  await page.waitForTimeout(3000)
   await page.getByRole('button', { name: '滚动到500列' }).click()
   await page.waitForTimeout(200)
   await expect(page.getByText('col508')).toBeVisible()

package/demos/pc/app/grid/loading/grid-loading-tip.spec.js

@@ -4,5 +4,5 @@ test('开启加载中状态', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('grid-loading#loading-grid-loading-tip')
   await page.getByRole('button', { name: '重试' }).click()
-  await expect(page.locator('.tiny-grid-loading__wrap')).toBeVisible()
+  await expect(page.locator('.tiny-grid-loading')).toBeVisible()
 })

package/demos/pc/app/grid/pager/show-save-msg-composition-api.vue

@@ -122,6 +122,6 @@ function getData({ page }) {
 }
 
 function pageChange() {
-  Modal.message('取消分页')
+  Modal.message({ message: '取消分页', status: 'info' })
 }
 </script>

package/demos/pc/app/grid/pager/show-save-msg.vue

@@ -129,7 +129,7 @@ export default {
       })
     },
     pageChange() {
-      Modal.message('取消分页')
+      Modal.message({ message: '取消分页', status: 'info' })
     }
   }
 }

package/demos/pc/app/grid/renderer/inner-renderer-date-composition-api.vue

@@ -0,0 +1,40 @@
+<template>
+  <tiny-grid :data="tableData">
+    <tiny-grid-column type="index" width="60"></tiny-grid-column>
+    <tiny-grid-column field="date1" title="日期1" format-text="date"></tiny-grid-column>
+    <tiny-grid-column field="date2" title="日期2" format-text="date"></tiny-grid-column>
+    <tiny-grid-column
+      field="date3"
+      title="日期3"
+      format-text="date"
+      :format-config="{ valueFormat: 'dd/MM/yyyy' }"
+    ></tiny-grid-column>
+    <tiny-grid-column
+      field="date4"
+      title="日期4"
+      format-text="date"
+      :format-config="{ valueFormat: 'dd/MM/yyyy' }"
+    ></tiny-grid-column>
+    <tiny-grid-column
+      field="date5"
+      title="日期5"
+      format-text="date"
+      :format-config="{ valueFormat: 'MM/dd/yyyy' }"
+    ></tiny-grid-column>
+  </tiny-grid>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { Grid as TinyGrid, GridColumn as TinyGridColumn } from '@opentiny/vue'
+const tableData = ref([
+  {
+    id: '1',
+    date1: 1719849600000,
+    date2: new Date(),
+    date3: '07/02/2024', // Date.parse 能正常解析，但是被解析为 7 月 2 号
+    date4: '15/02/2024', // Date.parse 不能正常解析
+    date5: '02/15/2024' // Date.parse 能正常解析为 2 月 15 号
+  }
+])
+</script>

package/demos/pc/app/grid/renderer/inner-renderer-date.spec.js

@@ -0,0 +1,9 @@
+import { test, expect } from '@playwright/test'
+
+test('日期渲染器', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('grid-renderer#renderer-inner-renderer-date')
+  await expect(page.getByText('-07-02')).toBeVisible()
+  await expect(page.getByText('-02-15').first()).toBeVisible()
+  await expect(page.getByText('-02-15').nth(1)).toBeVisible()
+})

package/demos/pc/app/grid/renderer/inner-renderer-date.vue

@@ -0,0 +1,50 @@
+<template>
+  <tiny-grid :data="tableData">
+    <tiny-grid-column type="index" width="60"></tiny-grid-column>
+    <tiny-grid-column field="date1" title="日期1" format-text="date"></tiny-grid-column>
+    <tiny-grid-column field="date2" title="日期2" format-text="date"></tiny-grid-column>
+    <tiny-grid-column
+      field="date3"
+      title="日期3"
+      format-text="date"
+      :format-config="{ valueFormat: 'dd/MM/yyyy' }"
+    ></tiny-grid-column>
+    <tiny-grid-column
+      field="date4"
+      title="日期4"
+      format-text="date"
+      :format-config="{ valueFormat: 'dd/MM/yyyy' }"
+    ></tiny-grid-column>
+    <tiny-grid-column
+      field="date5"
+      title="日期5"
+      format-text="date"
+      :format-config="{ valueFormat: 'MM/dd/yyyy' }"
+    ></tiny-grid-column>
+  </tiny-grid>
+</template>
+
+<script>
+import { Grid, GridColumn } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyGrid: Grid,
+    TinyGridColumn: GridColumn
+  },
+  data() {
+    return {
+      tableData: [
+        {
+          id: '1',
+          date1: 1719849600000,
+          date2: new Date(),
+          date3: '07/02/2024', // Date.parse 能正常解析，但是被解析为 7 月 2 号
+          date4: '15/02/2024', // Date.parse 不能正常解析
+          date5: '02/15/2024' // Date.parse 能正常解析为 2 月 15 号
+        }
+      ]
+    }
+  }
+}
+</script>

package/demos/pc/app/grid/size/grid-size-composition-api.vue

@@ -1,33 +1,40 @@
 <template>
-  <p>medium</p>
-  <tiny-grid :data="tableData" size="medium">
-    <tiny-grid-column type="index" width="60"></tiny-grid-column>
-    <tiny-grid-column type="selection" width="60"></tiny-grid-column>
-    <tiny-grid-column field="employees" title="员工数"></tiny-grid-column>
-    <tiny-grid-column field="createdDate" title="创建日期"></tiny-grid-column>
-    <tiny-grid-column field="city" title="城市"></tiny-grid-column>
-  </tiny-grid>
-  <p>small</p>
-  <tiny-grid :data="tableData" size="small">
-    <tiny-grid-column type="index" width="60"></tiny-grid-column>
-    <tiny-grid-column type="selection" width="60"></tiny-grid-column>
-    <tiny-grid-column field="employees" title="员工数"></tiny-grid-column>
-    <tiny-grid-column field="createdDate" title="创建日期"></tiny-grid-column>
-    <tiny-grid-column field="city" title="城市"></tiny-grid-column>
-  </tiny-grid>
-  <p>mini</p>
-  <tiny-grid :data="tableData" size="mini">
-    <tiny-grid-column type="index" width="60"></tiny-grid-column>
-    <tiny-grid-column type="selection" width="60"></tiny-grid-column>
-    <tiny-grid-column field="employees" title="员工数"></tiny-grid-column>
-    <tiny-grid-column field="createdDate" title="创建日期"></tiny-grid-column>
-    <tiny-grid-column field="city" title="城市"></tiny-grid-column>
-  </tiny-grid>
+  <tiny-tabs v-model="activeName" tab-style="card">
+    <tiny-tab-item title="medium" name="medium">
+      <tiny-grid :data="tableData" size="medium" :auto-resize="true">
+        <tiny-grid-column type="index" width="60"></tiny-grid-column>
+        <tiny-grid-column type="selection" width="60"></tiny-grid-column>
+        <tiny-grid-column field="employees" title="员工数"></tiny-grid-column>
+        <tiny-grid-column field="createdDate" title="创建日期"></tiny-grid-column>
+        <tiny-grid-column field="city" title="城市"></tiny-grid-column>
+      </tiny-grid>
+    </tiny-tab-item>
+    <tiny-tab-item title="small" name="small">
+      <tiny-grid :data="tableData" size="small" :auto-resize="true">
+        <tiny-grid-column type="index" width="60"></tiny-grid-column>
+        <tiny-grid-column type="selection" width="60"></tiny-grid-column>
+        <tiny-grid-column field="employees" title="员工数"></tiny-grid-column>
+        <tiny-grid-column field="createdDate" title="创建日期"></tiny-grid-column>
+        <tiny-grid-column field="city" title="城市"></tiny-grid-column>
+      </tiny-grid>
+    </tiny-tab-item>
+    <tiny-tab-item title="mini" name="mini">
+      <tiny-grid :data="tableData" size="mini" :auto-resize="true">
+        <tiny-grid-column type="index" width="60"></tiny-grid-column>
+        <tiny-grid-column type="selection" width="60"></tiny-grid-column>
+        <tiny-grid-column field="employees" title="员工数"></tiny-grid-column>
+        <tiny-grid-column field="createdDate" title="创建日期"></tiny-grid-column>
+        <tiny-grid-column field="city" title="城市"></tiny-grid-column>
+      </tiny-grid>
+    </tiny-tab-item>
+  </tiny-tabs>
 </template>
 
-<script setup lang="jsx">
+<script setup>
 import { ref } from 'vue'
-import { Grid as TinyGrid, GridColumn as TinyGridColumn } from '@opentiny/vue'
+import { Grid as TinyGrid, GridColumn as TinyGridColumn, Tabs as TinyTabs, TabItem as TinyTabItem } from '@opentiny/vue'
+
+const activeName = ref('medium')
 
 const tableData = ref([
   {

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

@@ -5,11 +5,15 @@ test('尺寸', async ({ page }) => {
   await page.goto('grid-size#size-grid-size')
   const mediumTd = page.locator('.size__medium .tiny-grid-body__column').first()
   const { height: heightMedium } = await mediumTd.boundingBox()
+  await page.getByText('small').click()
+  await page.waitForTimeout(500)
   const smallTd = page.locator('.size__small .tiny-grid-body__column').first()
   const { height: heightSamll } = await smallTd.boundingBox()
-  const miniTd = page.locator('.size__small .tiny-grid-body__column').first()
+  await page.getByText('mini').click()
+  await page.waitForTimeout(500)
+  const miniTd = page.locator('.size__mini .tiny-grid-body__column').first()
   const { height: heightMini } = await miniTd.boundingBox()
 
-  await expect(heightMedium).toBeGreaterThanOrEqual(heightSamll)
-  await expect(heightSamll).toBeGreaterThanOrEqual(heightMini)
+  await expect(heightMedium).toBeGreaterThan(heightSamll)
+  await expect(heightSamll).toBeGreaterThan(heightMini)
 })