npm - @opentiny/vue-docs - Versions diffs - 2.2.19 → 2.2.21 - Mend

@opentiny/vue-docs 2.2.19 → 2.2.21

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (438) hide show

package/demos/pc/app/grid/large-data/column-anchor-clear-active.vue ADDED Viewed

@@ -0,0 +1,199 @@
+<template>
+  <tiny-grid
+    column-min-width="100"
+    auto-resize
+    :column-anchor="columnAnchor"
+    :optimization="{ scrollX: { gt: 20 } }"
+    :fetch-data="fetchData"
+    :pager="pagerConfig"
+  >
+    <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, Pager } from '@opentiny/vue'
+import { IconMarkOn } from '@opentiny/vue-icon'
+const tableData = [
+  {
+    id: '1',
+    name: 'GFD科技有限公司',
+    address: '福州',
+    introduction: '公司技术和研发实力雄厚',
+    employees: 800,
+    name0: '1-name-0',
+    name1: '1-name-1',
+    name2: '1-name-2'
+  },
+  {
+    id: '2',
+    name: 'WWW科技有限公司',
+    address: '深圳福田区',
+    introduction: '公司技术和研发实力雄厚',
+    employees: 300,
+    name0: '2-name-0',
+    name1: '2-name-1',
+    name2: '2-name-2'
+  },
+  {
+    id: '3',
+    name: 'RFV有限责任公司',
+    address: '中山市',
+    introduction: '公司技术和研发实力雄厚',
+    employees: 1300,
+    name0: '3-name-0',
+    name1: '3-name-1',
+    name2: '3-name-2'
+  },
+  {
+    id: '4',
+    name: 'JKL科技有限公司',
+    address: '福州',
+    introduction: '公司技术和研发实力雄厚',
+    employees: 1200,
+    name0: '4-name-0',
+    name1: '4-name-1',
+    name2: '4-name-2'
+  },
+  {
+    id: '5',
+    name: 'TGB科技有限公司',
+    address: '深圳福田区',
+    introduction: '公司技术和研发实力雄厚',
+    employees: 1400,
+    name0: '5-name-0',
+    name1: '5-name-1',
+    name2: '5-name-2'
+  },
+  {
+    id: '6',
+    name: 'XDR有限责任公司',
+    address: '中山市',
+    introduction: '公司技术和研发实力雄厚',
+    employees: 900,
+    name0: '6-name-0',
+    name1: '6-name-1',
+    name2: '6-name-2'
+  }
+]
+export default {
+  components: {
+    TinyGrid: Grid,
+    TinyGridColumn: GridColumn
+  },
+  data() {
+    return {
+      columnAnchor: [
+        'name',
+        ['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)]
+              )
+          ]
+        ],
+        {
+          field: 'address', // 列锚点字段
+          label: null, // 列锚点名称
+          render: null, // 列锚点自定义渲染方法
+          active: true, // 是否默认激活
+          delay: 30 // 定位延时
+        }
+      ],
+      pagerConfig: {
+        component: Pager,
+        attrs: {
+          currentPage: 1,
+          pageSize: 3,
+          pageSizes: [3, 5, 10],
+          total: 0,
+          layout: 'total, prev, pager, next, jumper, sizes'
+        }
+      },
+      fetchData: { api: this.getData }
+    }
+  },
+  methods: {
+    getData({ page }) {
+      let curPage = page.currentPage
+      let pageSize = page.pageSize
+      let offset = (curPage - 1) * pageSize
+      return new Promise((resolve) => {
+        setTimeout(() => {
+          let result = tableData.slice(0)
+          let total = tableData.length
+          result = result.slice(offset, offset + pageSize)
+          resolve({ result, page: { total } })
+        }, 300)
+      })
+    }
+  }
+}
+</script>

package/demos/pc/app/grid/large-data/column-anchor-composition-api.vue ADDED Viewed

@@ -0,0 +1,124 @@
+<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 setup>
+import { ref } from 'vue'
+import { Grid as TinyGrid, GridColumn as TinyGridColumn } from '@opentiny/vue'
+import { IconMarkOn } from '@opentiny/vue-icon'
+const columnAnchor = ref([
+  '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)]
+        )
+    ]
+  ]
+])
+const tableData = ref([
+  {
+    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 CHANGED Viewed

@@ -6,5 +6,5 @@ test('滚动到指定位置', async ({ page }) => {
   await page.waitForTimeout(3000)
   await page.getByRole('button', { name: '滚动到500列' }).click()
   await page.waitForTimeout(200)
-  await expect(page.getByText('col508')).toBeVisible()
+  await expect(page.getByText('col499')).toBeVisible()
 })

package/demos/pc/app/grid/renderer/inner-renderer-rate-composition-api.vue ADDED Viewed

@@ -0,0 +1,50 @@
+<template>
+  <tiny-grid :data="tableData">
+    <tiny-grid-column type="index" width="60"></tiny-grid-column>
+    <tiny-grid-column
+      field="rate"
+      title="内置列渲染rate1"
+      format-text="rate"
+      :format-config="{ fraction: 4, max: 10 }"
+    ></tiny-grid-column>
+    <tiny-grid-column
+      field="rate"
+      title="内置列渲染rate2"
+      format-text="rate"
+      :format-config="{ fraction: 4, total: 10 }"
+    ></tiny-grid-column>
+    <tiny-grid-column
+      field="rate1"
+      title="自定义渲染rate"
+      format-text="rate"
+      :format-config="{ rateMethod }"
+    ></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', rate: 2, rate1: 0 },
+  { id: '2', rate: 0.65555, rate1: 0.65555 },
+  { id: '3', rate: 0.3445, rate1: 0.3445 },
+  { id: '4', rate: 0.0005, rate1: 0.0005 },
+  { id: '5', rate: 0.6005, rate1: 0.6005 },
+  { id: '6', rate: 0.06005, rate1: 0.06005 }
+])
+const rateMethod = (value) => {
+  let str = (parseFloat(value) * 1000000).toString(10)
+  str = '000000'.slice(0, 6 - str.length) + str
+  let int = str.slice(0, 2)
+  int = int.replace(/^0+/, '')
+  int = int === '' ? '0' : int
+  const dec = str.slice(2)
+  return `${int}.${dec}%`
+}
+</script>

package/demos/pc/app/grid/renderer/inner-renderer-rate.spec.js ADDED Viewed

@@ -0,0 +1,12 @@
+import { test, expect } from '@playwright/test'
+test('比率渲染器', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('grid-renderer#renderer-inner-renderer-rate')
+  const redCell = page.getByRole('cell', { name: '200.0000%' }).first().locator('.tiny-grid__rate-chart')
+  await expect(redCell).toHaveCSS('background-color', 'rgb(222, 80, 78)')
+  const yellowCell = page.getByRole('cell', { name: '34.4500%' }).nth(1).locator('.tiny-grid__rate-chart')
+  await expect(yellowCell).toHaveCSS('background-color', 'rgb(250, 152, 65)')
+  const blueCell = page.getByRole('cell', { name: '60.0500%' }).nth(1).locator('.tiny-grid__rate-chart')
+  await expect(blueCell).toHaveCSS('background-color', 'rgb(94, 124, 224)')
+})

package/demos/pc/app/grid/renderer/inner-renderer-rate.vue ADDED Viewed

@@ -0,0 +1,60 @@
+<template>
+  <tiny-grid :data="tableData">
+    <tiny-grid-column type="index" width="60"></tiny-grid-column>
+    <tiny-grid-column
+      field="rate"
+      title="内置列渲染rate1"
+      format-text="rate"
+      :format-config="{ fraction: 4, max: 10 }"
+    ></tiny-grid-column>
+    <tiny-grid-column
+      field="rate"
+      title="内置列渲染rate2"
+      format-text="rate"
+      :format-config="{ fraction: 4, total: 10 }"
+    ></tiny-grid-column>
+    <tiny-grid-column
+      field="rate1"
+      title="自定义渲染rate"
+      format-text="rate"
+      :format-config="{ rateMethod }"
+    ></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', rate: 2, rate1: 0 },
+        { id: '2', rate: 0.65555, rate1: 0.65555 },
+        { id: '3', rate: 0.3445, rate1: 0.3445 },
+        { id: '4', rate: 0.0005, rate1: 0.0005 },
+        { id: '5', rate: 0.6005, rate1: 0.6005 },
+        { id: '6', rate: 0.06005, rate1: 0.06005 }
+      ]
+    }
+  },
+  methods: {
+    rateMethod(value) {
+      let str = (parseFloat(value) * 1000000).toString(10)
+      str = '000000'.slice(0, 6 - str.length) + str
+      let int = str.slice(0, 2)
+      int = int.replace(/^0+/, '')
+      int = int === '' ? '0' : int
+      const dec = str.slice(2)
+      return `${int}.${dec}%`
+    }
+  }
+}
+</script>

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

@@ -5,11 +5,11 @@ 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.getByText('small', { exact: true }).click()
   await page.waitForTimeout(500)
   const smallTd = page.locator('.size__small .tiny-grid-body__column').first()
   const { height: heightSamll } = await smallTd.boundingBox()
-  await page.getByText('mini').click()
+  await page.getByText('mini', { exact: true }).click()
   await page.waitForTimeout(500)
   const miniTd = page.locator('.size__mini .tiny-grid-body__column').first()
   const { height: heightMini } = await miniTd.boundingBox()

package/demos/pc/app/grid/tree-table/set-tree-expansion-composition-api.vue CHANGED Viewed

@@ -7,8 +7,8 @@
     </div>
     <br />
     <tiny-grid :data="tableData" ref="grid" :tree-config="{ children: 'children' }">
-      <tiny-grid-column type="selection" width="100" tree-node></tiny-grid-column>
-      <tiny-grid-column field="name" title="公司名称"></tiny-grid-column>
+      <tiny-grid-column type="selection" width="100"></tiny-grid-column>
+      <tiny-grid-column field="name" title="公司名称" tree-node></tiny-grid-column>
       <tiny-grid-column field="area" title="区域"></tiny-grid-column>
       <tiny-grid-column field="employees" title="员工数"></tiny-grid-column>
     </tiny-grid>

package/demos/pc/app/grid/tree-table/set-tree-expansion.vue CHANGED Viewed

@@ -7,8 +7,8 @@
     </div>
     <br />
     <tiny-grid :data="tableData" ref="grid" :tree-config="{ children: 'children' }">
-      <tiny-grid-column type="selection" width="100" tree-node></tiny-grid-column>
-      <tiny-grid-column field="name" title="公司名称"></tiny-grid-column>
+      <tiny-grid-column type="selection" width="100"></tiny-grid-column>
+      <tiny-grid-column field="name" title="公司名称" tree-node></tiny-grid-column>
       <tiny-grid-column field="area" title="区域"></tiny-grid-column>
       <tiny-grid-column field="employees" title="员工数"></tiny-grid-column>
     </tiny-grid>

package/demos/pc/app/grid/tree-table/tree-grid-index-composition-api.vue CHANGED Viewed

@@ -7,8 +7,8 @@
       :edit-config="{ trigger: 'click', mode: 'cell', showStatus: true }"
       :select-config="{ labelField: 'index' }"
     >
-      <tiny-grid-column type="selection" width="100" tree-node></tiny-grid-column>
-      <tiny-grid-column type="index" width="80"></tiny-grid-column>
+      <tiny-grid-column type="selection" width="100"></tiny-grid-column>
+      <tiny-grid-column type="index" width="80" tree-node></tiny-grid-column>
       <tiny-grid-column field="name" title="公司名称"></tiny-grid-column>
       <tiny-grid-column field="area" title="区域" :editor="{ component: 'input', autoselect: true }"></tiny-grid-column>
       <tiny-grid-column

package/demos/pc/app/grid/tree-table/tree-grid-index.spec.js CHANGED Viewed

@@ -3,11 +3,23 @@ import { test, expect } from '@playwright/test'
 test('展开行序号列配置', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('grid-tree-table#tree-table-tree-grid-index')
-  await page.getByRole('row', { name: '1 GFD科技YX公司 华东区 800' }).getByRole('img').first().click()
-  await page.getByRole('row', { name: '2 WWWW科技YX公司 华南区 500' }).getByRole('img').first().click()
-  await page.getByRole('row', { name: '3 TGBYX公司 华南区 360' }).getByRole('img').first().click()
+  await page
+    .getByRole('row', { name: '1 GFD科技YX公司 华东区 800' })
+    .locator('.tiny-grid-tree__node-btn')
+    .first()
+    .click()
+  await page
+    .getByRole('row', { name: '2 WWWW科技YX公司 华南区 500' })
+    .locator('.tiny-grid-tree__node-btn')
+    .first()
+    .click()
+  await page.getByRole('row', { name: '3 TGBYX公司 华南区 360' }).locator('.tiny-grid-tree__node-btn').first().click()
   await page.getByText('3.1').click()
-  await page.getByRole('row', { name: '4 康康物业YX公司 华南区 400' }).getByRole('img').first().click()
+  await page
+    .getByRole('row', { name: '4 康康物业YX公司 华南区 400' })
+    .locator('.tiny-grid-tree__node-btn')
+    .first()
+    .click()
   await expect(page.getByText('4.1')).toBeVisible()
 })

package/demos/pc/app/grid/tree-table/tree-grid-index.vue CHANGED Viewed

@@ -7,8 +7,8 @@
       :edit-config="{ trigger: 'click', mode: 'cell', showStatus: true }"
       :select-config="{ labelField: 'index' }"
     >
-      <tiny-grid-column type="selection" width="100" tree-node></tiny-grid-column>
-      <tiny-grid-column type="index" width="80"></tiny-grid-column>
+      <tiny-grid-column type="selection" width="100"></tiny-grid-column>
+      <tiny-grid-column type="index" width="80" tree-node></tiny-grid-column>
       <tiny-grid-column field="name" title="公司名称"></tiny-grid-column>
       <tiny-grid-column field="area" title="区域" :editor="{ component: 'input', autoselect: true }"></tiny-grid-column>
       <tiny-grid-column

package/demos/pc/app/grid/tree-table/tree-grid-insert-delete-update-composition-api.vue CHANGED Viewed

@@ -18,9 +18,10 @@
           </template>
         </tiny-grid-toolbar>
       </template>
-      <tiny-grid-column type="selection" width="100" tree-node></tiny-grid-column>
-      <tiny-grid-column type="index" width="80"></tiny-grid-column>
+      <tiny-grid-column type="selection" width="100"></tiny-grid-column>
+      <tiny-grid-column type="index" width="80" tree-node></tiny-grid-column>
       <tiny-grid-column field="name" title="公司名称"></tiny-grid-column>
       <tiny-grid-column field="area" title="区域" :editor="{ component: 'input', autoselect: true }"></tiny-grid-column>
       <tiny-grid-column
         field="employees"
@@ -93,6 +94,8 @@ function copy(nodes1, nodes2) {
   return res
 }
+const increaseId = ref(30)
 const tableData = ref([
   {
     id: '1',
@@ -206,8 +209,10 @@ function insertEvent() {
   const row = {
     name: '新数据',
     isNew: true,
+    id: String(increaseId.value++),
     children: [
       {
+        id: String(increaseId.value++),
         name: '新数据-child'
       }
     ]

package/demos/pc/app/grid/tree-table/tree-grid-insert-delete-update.spec.js CHANGED Viewed

@@ -10,7 +10,7 @@ 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()
   })
@@ -18,7 +18,11 @@ test.describe('树表增删改功能', () => {
   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')

package/demos/pc/app/grid/tree-table/tree-grid-insert-delete-update.vue CHANGED Viewed

@@ -18,8 +18,8 @@
           </template>
         </tiny-grid-toolbar>
       </template>
-      <tiny-grid-column type="selection" width="100" tree-node></tiny-grid-column>
-      <tiny-grid-column type="index" width="80"></tiny-grid-column>
+      <tiny-grid-column type="selection" width="100"></tiny-grid-column>
+      <tiny-grid-column type="index" width="80" tree-node></tiny-grid-column>
       <tiny-grid-column field="name" title="公司名称"></tiny-grid-column>
       <tiny-grid-column field="area" title="区域" :editor="{ component: 'input', autoselect: true }"></tiny-grid-column>
       <tiny-grid-column
@@ -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'
           }
         ]

package/demos/pc/app/grid/webdoc/grid-custom-style.js CHANGED Viewed

@@ -28,7 +28,7 @@ export default {
       'name': { 'zh-CN': '自定义表尾样式', 'en-US': 'Table tail style (customized table tail row style)' },
       'desc': {
         'zh-CN':
-          '<p>通过 <code>footer-cell-class-name</code> 和 <code>footer-row-class-name</code> 设置表尾的单元格和行样式。或者使用表格列的属性 <code>footer-class-name</code> 设置表尾单元格样式</p>\n',
+          '<p>通过 <code>footer-cell-class-name</code> 和 <code>footer-row-class-name</code> 设置表尾的单元格和行样式。或者使用表格列的属性 <code>footer-class-name</code> 设置表尾单元格样式。</p>\n',
         'en-US':
           '<p>Use <code>footer-cell-class-name</code> and <code>footer-row-class-name</code> to set the cell and row styles at the end of the table</p>\n'
       },