@opentiny/vue-docs 3.16.2 → 3.17.0

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

@@ -5,9 +5,9 @@ test('简化版列设置测试', async ({ page }) => {
   await page.goto('grid-custom#custom-column-simple')
   await page.locator('.tiny-select > div').click()
   await page.getByRole('listitem').filter({ hasText: '员工数' }).click()
-  const thHeader = page.locator('th.tiny-grid-header__column').nth(1)
-  await expect(thHeader).toContainText('名称')
-  await page.getByRole('listitem').filter({ hasText: '名称' }).locator('span').nth(2).click()
+  const thHeader = page.locator('th.tiny-grid-header__column').nth(3)
+  await expect(thHeader).toContainText('地址')
+  await page.getByRole('listitem').filter({ hasText: '名称' }).click()
   const thHeader2 = page.locator('th.tiny-grid-header__column').nth(1)
 
   await expect(thHeader2).toContainText('员工数')

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

@@ -3,10 +3,11 @@ import { test, expect } from '@playwright/test'
 test('分页条数', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('grid-custom#custom-page-size')
-  await expect(page.locator('.tiny-grid-body__row')).toHaveCount(10)
-  await page.locator('.tiny-grid-custom__setting-btn').click()
+  const demo = page.locator('#custom-page-size')
+  await expect(demo.locator('.tiny-grid-body__row')).toHaveCount(10)
+  await demo.locator('.tiny-grid-custom__setting-btn').click()
   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(page.locator('.tiny-grid-body__row')).toHaveCount(5)
+  await expect(demo.locator('.tiny-grid-body__row')).toHaveCount(5)
 })

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

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

package/demos/pc/app/grid/drag/multi-header-drag-composition-api.vue

@@ -0,0 +1,156 @@
+<template>
+  <tiny-grid
+    :data="tableData"
+    column-key
+    :drop-config="dropConfig"
+    @column-drag-start="columnDragStart"
+    @column-drop="columnDrop"
+    column-min-width="180"
+    :optimization="{ scrollX: { gt: 10, rSize: 15 } }"
+    show-header-overflow
+  >
+    <tiny-grid-column title="group">
+      <tiny-grid-column type="index" width="60" fixed="left"></tiny-grid-column>
+      <tiny-grid-column field="name" title="公司名称" fixed="left"></tiny-grid-column>
+    </tiny-grid-column>
+    <tiny-grid-column title="group1">
+      <tiny-grid-column field="employees" title="员工数1"></tiny-grid-column>
+      <tiny-grid-column field="created_date" title="创建日期1"></tiny-grid-column>
+    </tiny-grid-column>
+    <tiny-grid-column title="group2">
+      <tiny-grid-column field="employees" title="员工数2"></tiny-grid-column>
+      <tiny-grid-column field="created_date" title="创建日期2"></tiny-grid-column>
+    </tiny-grid-column>
+    <tiny-grid-column title="group3">
+      <tiny-grid-column field="employees" title="员工数3"></tiny-grid-column>
+      <tiny-grid-column field="created_date" title="创建日期3"></tiny-grid-column>
+    </tiny-grid-column>
+    <tiny-grid-column title="group4">
+      <tiny-grid-column field="employees" title="员工数4"></tiny-grid-column>
+      <tiny-grid-column field="created_date" title="创建日期4"></tiny-grid-column>
+    </tiny-grid-column>
+    <tiny-grid-column title="group5">
+      <tiny-grid-column field="employees" title="员工数5"></tiny-grid-column>
+      <tiny-grid-column field="created_date" title="创建日期5"></tiny-grid-column>
+    </tiny-grid-column>
+    <tiny-grid-column title="group6">
+      <tiny-grid-column field="employees" title="员工数6"></tiny-grid-column>
+      <tiny-grid-column field="created_date" title="创建日期6"></tiny-grid-column>
+    </tiny-grid-column>
+    <tiny-grid-column title="group7">
+      <tiny-grid-column field="employees" title="员工数7"></tiny-grid-column>
+      <tiny-grid-column field="created_date" title="创建日期7"></tiny-grid-column>
+    </tiny-grid-column>
+    <tiny-grid-column title="group8">
+      <tiny-grid-column field="employees" title="员工数8"></tiny-grid-column>
+      <tiny-grid-column field="created_date" title="创建日期8"></tiny-grid-column>
+    </tiny-grid-column>
+    <tiny-grid-column title="group9">
+      <tiny-grid-column field="employees" title="员工数9"></tiny-grid-column>
+      <tiny-grid-column field="created_date" title="创建日期9"></tiny-grid-column>
+    </tiny-grid-column>
+    <tiny-grid-column title="group10">
+      <tiny-grid-column field="employees" title="员工数10"></tiny-grid-column>
+      <tiny-grid-column field="created_date" title="创建日期10"></tiny-grid-column>
+    </tiny-grid-column>
+    <tiny-grid-column title="group11">
+      <tiny-grid-column field="employees" title="员工数11"></tiny-grid-column>
+      <tiny-grid-column field="created_date" title="创建日期11"></tiny-grid-column>
+    </tiny-grid-column>
+    <tiny-grid-column title="group12">
+      <tiny-grid-column field="employees" title="员工数12"></tiny-grid-column>
+      <tiny-grid-column field="created_date" title="创建日期12"></tiny-grid-column>
+    </tiny-grid-column>
+    <tiny-grid-column title="group13">
+      <tiny-grid-column field="employees" title="员工数13"></tiny-grid-column>
+      <tiny-grid-column field="created_date" title="创建日期13"></tiny-grid-column>
+    </tiny-grid-column>
+    <tiny-grid-column title="group14">
+      <tiny-grid-column field="employees" title="员工数14"></tiny-grid-column>
+      <tiny-grid-column field="created_date" title="创建日期14"></tiny-grid-column>
+    </tiny-grid-column>
+    <tiny-grid-column title="group15">
+      <tiny-grid-column field="employees" title="员工数15"></tiny-grid-column>
+      <tiny-grid-column field="created_date" title="创建日期15"></tiny-grid-column>
+    </tiny-grid-column>
+    <tiny-grid-column title="group16">
+      <tiny-grid-column field="employees" title="员工数16"></tiny-grid-column>
+      <tiny-grid-column field="created_date" title="创建日期16"></tiny-grid-column>
+    </tiny-grid-column>
+    <tiny-grid-column title="group17">
+      <tiny-grid-column field="employees" title="员工数17"></tiny-grid-column>
+      <tiny-grid-column field="created_date" title="创建日期17"></tiny-grid-column>
+    </tiny-grid-column>
+    <tiny-grid-column title="group18">
+      <tiny-grid-column field="employees" title="员工数18"></tiny-grid-column>
+      <tiny-grid-column field="created_date" title="创建日期18"></tiny-grid-column>
+    </tiny-grid-column>
+    <tiny-grid-column title="group19">
+      <tiny-grid-column field="employees" title="员工数19"></tiny-grid-column>
+      <tiny-grid-column field="created_date" title="创建日期19"></tiny-grid-column>
+    </tiny-grid-column>
+    <tiny-grid-column title="group20">
+      <tiny-grid-column field="employees" title="员工数20"></tiny-grid-column>
+      <tiny-grid-column field="created_date" title="创建日期20"></tiny-grid-column>
+    </tiny-grid-column>
+    <tiny-grid-column field="city" title="城市" fixed="right"></tiny-grid-column>
+  </tiny-grid>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { Grid as TinyGrid, GridColumn as TinyGridColumn, Modal } from '@opentiny/vue'
+
+const dropConfig = ref({
+  // 在设置 scheme 标志位 v2 时，列拖拽使用新方案。不影响行拖拽使用 sortablejs
+  scheme: 'v2',
+  // 开启列拖拽
+  column: true,
+  // 可选值：level（同层级拖拽）和 nested（跨层级拖拽），默认值 level
+  columnGroup: 'level',
+  // 拖拽前处理，返回 false 则阻止拖拽，其它返回值不阻止拖拽。支持异步。
+  columnBeforeDrop: ({ dragColumn, dropColumn }) => {
+    console.log('columnBeforeDrop', dragColumn, dropColumn)
+    return true
+  },
+  // 可放置列临时样式类
+  columnDropClass: 'in-drop'
+})
+const tableData = ref([
+  {
+    id: '1',
+    name: 'GFD科技有限公司',
+    city: '福州',
+    employees: 800,
+    created_date: '2014-04-30 00:56:00'
+  },
+  {
+    id: '2',
+    name: 'WWW科技有限公司',
+    city: '深圳',
+    employees: 300,
+    created_date: '2016-07-08 12:36:22'
+  },
+  {
+    id: '3',
+    name: 'RFV有限责任公司',
+    city: '中山',
+    employees: 1300,
+    created_date: '2014-02-14 14:14:14'
+  }
+])
+
+function columnDragStart() {
+  Modal.message({ message: '列拖拽开始', status: 'info' })
+}
+function columnDrop() {
+  Modal.message({ message: '列拖拽结束', status: 'info' })
+}
+</script>
+
+<style>
+.in-drop {
+  outline: 1px dashed rgba(170, 50, 220, 0.6);
+  outline-offset: -2px;
+}
+</style>

package/demos/pc/app/grid/drag/multi-header-drag.spec.js

@@ -0,0 +1,40 @@
+import { test, expect } from '@playwright/test'
+
+test('多级表头拖拽', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('grid-drag#multi-header-drag')
+  await page.setViewportSize({
+    width: 2000,
+    height: 1000
+  })
+  const draggerDom = page.getByRole('cell', { name: '创建日期1' })
+  // 获取拖拽元素位置
+  const { x, y } = await draggerDom.boundingBox()
+  // 验证不可拖拽
+  await page.mouse.move(x + 2, y + 3)
+  await page.waitForTimeout(200)
+  await page.mouse.down()
+  await page.waitForTimeout(200)
+  await page.mouse.move(x + 200, y)
+  await page.waitForTimeout(200)
+  await page.mouse.up()
+  await page.waitForTimeout(200)
+  await expect(page.locator('.tiny-grid-header__row').nth(1).locator('.tiny-grid-header__column').nth(3)).toContainText(
+    '创建日期1'
+  )
+
+  // 获取拖拽元素位置
+  const { x: left, y: top } = await draggerDom.boundingBox()
+  // 验证可拖拽
+  await page.mouse.move(left + 2, top + 3)
+  await page.waitForTimeout(200)
+  await page.mouse.down()
+  await page.waitForTimeout(200)
+  await page.mouse.move(left - 50, top)
+  await page.waitForTimeout(200)
+  await page.mouse.up()
+  await page.waitForTimeout(200)
+  await expect(page.locator('.tiny-grid-header__row').nth(1).locator('.tiny-grid-header__column').nth(2)).toContainText(
+    '创建日期1'
+  )
+})

package/demos/pc/app/grid/drag/multi-header-drag.vue

@@ -0,0 +1,166 @@
+<template>
+  <tiny-grid
+    :data="tableData"
+    column-key
+    :drop-config="dropConfig"
+    @column-drag-start="columnDragStart"
+    @column-drop="columnDrop"
+    column-min-width="180"
+    :optimization="{ scrollX: { gt: 10, rSize: 15 } }"
+    show-header-overflow
+  >
+    <tiny-grid-column title="group">
+      <tiny-grid-column type="index" width="60" fixed="left"></tiny-grid-column>
+      <tiny-grid-column field="name" title="公司名称"></tiny-grid-column>
+    </tiny-grid-column>
+    <tiny-grid-column title="group1">
+      <tiny-grid-column field="employees" title="员工数1"></tiny-grid-column>
+      <tiny-grid-column field="created_date" title="创建日期1"></tiny-grid-column>
+    </tiny-grid-column>
+    <tiny-grid-column title="group2">
+      <tiny-grid-column field="employees" title="员工数2"></tiny-grid-column>
+      <tiny-grid-column field="created_date" title="创建日期2"></tiny-grid-column>
+    </tiny-grid-column>
+    <tiny-grid-column title="group3">
+      <tiny-grid-column field="employees" title="员工数3"></tiny-grid-column>
+      <tiny-grid-column field="created_date" title="创建日期3"></tiny-grid-column>
+    </tiny-grid-column>
+    <tiny-grid-column title="group4">
+      <tiny-grid-column field="employees" title="员工数4"></tiny-grid-column>
+      <tiny-grid-column field="created_date" title="创建日期4"></tiny-grid-column>
+    </tiny-grid-column>
+    <tiny-grid-column title="group5">
+      <tiny-grid-column field="employees" title="员工数5"></tiny-grid-column>
+      <tiny-grid-column field="created_date" title="创建日期5"></tiny-grid-column>
+    </tiny-grid-column>
+    <tiny-grid-column title="group6">
+      <tiny-grid-column field="employees" title="员工数6"></tiny-grid-column>
+      <tiny-grid-column field="created_date" title="创建日期6"></tiny-grid-column>
+    </tiny-grid-column>
+    <tiny-grid-column title="group7">
+      <tiny-grid-column field="employees" title="员工数7"></tiny-grid-column>
+      <tiny-grid-column field="created_date" title="创建日期7"></tiny-grid-column>
+    </tiny-grid-column>
+    <tiny-grid-column title="group8">
+      <tiny-grid-column field="employees" title="员工数8"></tiny-grid-column>
+      <tiny-grid-column field="created_date" title="创建日期8"></tiny-grid-column>
+    </tiny-grid-column>
+    <tiny-grid-column title="group9">
+      <tiny-grid-column field="employees" title="员工数9"></tiny-grid-column>
+      <tiny-grid-column field="created_date" title="创建日期9"></tiny-grid-column>
+    </tiny-grid-column>
+    <tiny-grid-column title="group10">
+      <tiny-grid-column field="employees" title="员工数10"></tiny-grid-column>
+      <tiny-grid-column field="created_date" title="创建日期10"></tiny-grid-column>
+    </tiny-grid-column>
+    <tiny-grid-column title="group11">
+      <tiny-grid-column field="employees" title="员工数11"></tiny-grid-column>
+      <tiny-grid-column field="created_date" title="创建日期11"></tiny-grid-column>
+    </tiny-grid-column>
+    <tiny-grid-column title="group12">
+      <tiny-grid-column field="employees" title="员工数12"></tiny-grid-column>
+      <tiny-grid-column field="created_date" title="创建日期12"></tiny-grid-column>
+    </tiny-grid-column>
+    <tiny-grid-column title="group13">
+      <tiny-grid-column field="employees" title="员工数13"></tiny-grid-column>
+      <tiny-grid-column field="created_date" title="创建日期13"></tiny-grid-column>
+    </tiny-grid-column>
+    <tiny-grid-column title="group14">
+      <tiny-grid-column field="employees" title="员工数14"></tiny-grid-column>
+      <tiny-grid-column field="created_date" title="创建日期14"></tiny-grid-column>
+    </tiny-grid-column>
+    <tiny-grid-column title="group15">
+      <tiny-grid-column field="employees" title="员工数15"></tiny-grid-column>
+      <tiny-grid-column field="created_date" title="创建日期15"></tiny-grid-column>
+    </tiny-grid-column>
+    <tiny-grid-column title="group16">
+      <tiny-grid-column field="employees" title="员工数16"></tiny-grid-column>
+      <tiny-grid-column field="created_date" title="创建日期16"></tiny-grid-column>
+    </tiny-grid-column>
+    <tiny-grid-column title="group17">
+      <tiny-grid-column field="employees" title="员工数17"></tiny-grid-column>
+      <tiny-grid-column field="created_date" title="创建日期17"></tiny-grid-column>
+    </tiny-grid-column>
+    <tiny-grid-column title="group18">
+      <tiny-grid-column field="employees" title="员工数18"></tiny-grid-column>
+      <tiny-grid-column field="created_date" title="创建日期18"></tiny-grid-column>
+    </tiny-grid-column>
+    <tiny-grid-column title="group19">
+      <tiny-grid-column field="employees" title="员工数19"></tiny-grid-column>
+      <tiny-grid-column field="created_date" title="创建日期19"></tiny-grid-column>
+    </tiny-grid-column>
+    <tiny-grid-column title="group20">
+      <tiny-grid-column field="employees" title="员工数20"></tiny-grid-column>
+      <tiny-grid-column field="created_date" title="创建日期20"></tiny-grid-column>
+    </tiny-grid-column>
+    <tiny-grid-column field="city" title="城市" fixed="right"></tiny-grid-column>
+  </tiny-grid>
+</template>
+
+<script>
+import { Grid, GridColumn, Modal } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyGrid: Grid,
+    TinyGridColumn: GridColumn
+  },
+  data() {
+    return {
+      dropConfig: {
+        // 在设置 scheme 标志位 v2 时，列拖拽使用新方案。不影响行拖拽使用 sortablejs
+        scheme: 'v2',
+        // 开启列拖拽
+        column: true,
+        // 可选值：level（同层级拖拽）和 nested（跨层级拖拽），默认值 level
+        columnGroup: 'level',
+        // 拖拽前处理，返回 false 则阻止拖拽，其它返回值不阻止拖拽。支持异步。
+        columnBeforeDrop: ({ dragColumn, dropColumn }) => {
+          console.log('columnBeforeDrop', dragColumn, dropColumn)
+          return true
+        },
+        // 可放置列临时样式类
+        columnDropClass: 'in-drop'
+      },
+      tableData: [
+        {
+          id: '1',
+          name: 'GFD科技有限公司',
+          city: '福州',
+          employees: 800,
+          created_date: '2014-04-30 00:56:00'
+        },
+        {
+          id: '2',
+          name: 'WWW科技有限公司',
+          city: '深圳',
+          employees: 300,
+          created_date: '2016-07-08 12:36:22'
+        },
+        {
+          id: '3',
+          name: 'RFV有限责任公司',
+          city: '中山',
+          employees: 1300,
+          created_date: '2014-02-14 14:14:14'
+        }
+      ]
+    }
+  },
+  methods: {
+    columnDragStart() {
+      Modal.message({ message: '列拖拽开始', status: 'info' })
+    },
+    columnDrop() {
+      Modal.message({ message: '列拖拽结束', status: 'info' })
+    }
+  }
+}
+</script>
+
+<style>
+.in-drop {
+  outline: 1px dashed rgba(170, 50, 220, 0.6);
+  outline-offset: -2px;
+}
+</style>

package/demos/pc/app/grid/drag/row-drag-composition-api.vue

@@ -6,8 +6,9 @@
     @row-drop-end="rowDropEnd"
     @row-drop-start="rowDropStart"
     @row-drop-move="rowDropMove"
+    column-min-width="300px"
   >
-    <tiny-grid-column type="index" width="60"></tiny-grid-column>
+    <tiny-grid-column type="index" width="60" fixed="left"></tiny-grid-column>
     <tiny-grid-column field="name" title="公司名称"></tiny-grid-column>
     <tiny-grid-column field="employees" title="员工数"></tiny-grid-column>
     <tiny-grid-column field="createdDate" title="创建日期"></tiny-grid-column>
@@ -23,6 +24,7 @@ import Sortable from 'sortablejs'
 const dropConfig = ref({
   plugin: Sortable,
   row: true,
+  rowHandle: 'index',
   column: false // 取消列拖拽
 })
 const tableData = ref([

package/demos/pc/app/grid/drag/row-drag.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-drag#drag-row-drag')
-  const draggerDom = page.getByRole('cell', { name: 'RFV有限责任公司' })
+  const draggerDom = page.locator('.row__drop-handle').first()
   // 获取拖拽元素位置
   const { x, y } = await draggerDom.boundingBox()
   // 开始拖拽
@@ -15,5 +15,5 @@ test('行拖拽', async ({ page }) => {
   await page.waitForTimeout(200)
   await page.mouse.up()
   await page.waitForTimeout(200)
-  await expect(page.locator('.tiny-grid-body__row').nth(5)).toContainText('RFV有限责任公司')
+  await expect(page.locator('.tiny-grid-body__row').nth(5)).toContainText('WSX科技YX公司')
 })

package/demos/pc/app/grid/drag/row-drag.vue

@@ -6,8 +6,9 @@
     @row-drop-end="rowDropEnd"
     @row-drop-start="rowDropStart"
     @row-drop-move="rowDropMove"
+    column-min-width="300px"
   >
-    <tiny-grid-column type="index" width="60"></tiny-grid-column>
+    <tiny-grid-column type="index" width="60" fixed="left"></tiny-grid-column>
     <tiny-grid-column field="name" title="公司名称"></tiny-grid-column>
     <tiny-grid-column field="employees" title="员工数"></tiny-grid-column>
     <tiny-grid-column field="createdDate" title="创建日期"></tiny-grid-column>
@@ -29,6 +30,7 @@ export default {
       dropConfig: {
         plugin: Sortable,
         row: true,
+        rowHandle: 'index',
         column: false // 取消列拖拽
       },
       tableData: [

package/demos/pc/app/grid/dynamically-columns/dynamic-slot-composition-api.vue

@@ -0,0 +1,88 @@
+<template>
+  <div>
+    <div class="button-box">
+      <tiny-button @click="change">改变列插槽</tiny-button>
+    </div>
+    <tiny-grid :data="tableData">
+      <tiny-grid-column type="index" width="60"></tiny-grid-column>
+      <tiny-grid-column v-for="col in cols" :key="col.field" :field="col.field" :title="col.title">
+        <template v-if="col.header" #header>
+          <div>{{ col.header.value }}</div>
+        </template>
+        <template v-if="col.default" #default>
+          <div>{{ col.default.value }}</div>
+        </template>
+      </tiny-grid-column>
+      <tiny-grid-column field="address" title="地址"></tiny-grid-column>
+      <tiny-grid-column field="introduction" title="公司简介" show-overflow></tiny-grid-column>
+    </tiny-grid>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { Grid as TinyGrid, GridColumn as TinyGridColumn, Button as TinyButton } from '@opentiny/vue'
+
+let times = 1
+
+const createNewCols = () => [
+  {
+    field: 'name',
+    title: '名称',
+    header: {
+      value: `header-${++times}`
+    }
+  },
+  {
+    field: 'area',
+    title: '所属区域',
+    default: {
+      value: `col-${times}`
+    }
+  }
+]
+
+const cols = ref([
+  {
+    field: 'name',
+    title: '名称',
+    header: {
+      value: `header-${times}`
+    }
+  },
+  {
+    field: 'area',
+    title: '所属区域',
+    default: {
+      value: `col-${times}`
+    }
+  }
+])
+
+const tableData = ref([
+  {
+    id: '1',
+    name: 'GFD科技YX公司',
+    area: '华东区',
+    address: '福州',
+    introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。'
+  },
+  {
+    id: '2',
+    name: 'WWWW科技YX公司',
+    area: '华南区',
+    address: '深圳福田区',
+    introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。'
+  }
+])
+
+const change = () => {
+  cols.value = createNewCols()
+}
+</script>
+
+<style scoped>
+.button-box {
+  margin-bottom: 20px;
+}
+</style>

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

@@ -0,0 +1,14 @@
+import { test, expect } from '@playwright/test'
+
+test('动态修改列插槽', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('grid-dynamically-columns#dynamic-slot')
+  await expect(page.getByRole('cell', { name: 'header-1' })).toBeVisible()
+  await expect(page.getByRole('cell', { name: 'col-1' }).first()).toBeVisible()
+  await page.getByRole('button', { name: '改变列插槽' }).click()
+  await expect(page.getByRole('cell', { name: 'header-2' })).toBeVisible()
+  await expect(page.getByRole('cell', { name: 'col-2' }).first()).toBeVisible()
+  await page.getByRole('button', { name: '改变列插槽' }).click()
+  await expect(page.getByRole('cell', { name: 'header-3' })).toBeVisible()
+  await expect(page.getByRole('cell', { name: 'col-3' }).first()).toBeVisible()
+})

package/demos/pc/app/grid/dynamically-columns/dynamic-slot.vue

@@ -0,0 +1,97 @@
+<template>
+  <div>
+    <div class="button-box">
+      <tiny-button @click="change">改变列插槽</tiny-button>
+    </div>
+    <tiny-grid :data="tableData">
+      <tiny-grid-column type="index" width="60"></tiny-grid-column>
+      <tiny-grid-column v-for="col in cols" :key="col.field" :field="col.field" :title="col.title">
+        <template v-if="col.header" #header>
+          <div>{{ col.header.value }}</div>
+        </template>
+        <template v-if="col.default" #default>
+          <div>{{ col.default.value }}</div>
+        </template>
+      </tiny-grid-column>
+      <tiny-grid-column field="address" title="地址"></tiny-grid-column>
+      <tiny-grid-column field="introduction" title="公司简介" show-overflow></tiny-grid-column>
+    </tiny-grid>
+  </div>
+</template>
+
+<script>
+import { Grid, GridColumn, Button } from '@opentiny/vue'
+
+let times = 1
+
+const createNewCols = () => [
+  {
+    field: 'name',
+    title: '名称',
+    header: {
+      value: `header-${++times}`
+    }
+  },
+  {
+    field: 'area',
+    title: '所属区域',
+    default: {
+      value: `col-${times}`
+    }
+  }
+]
+export default {
+  components: {
+    TinyGrid: Grid,
+    TinyGridColumn: GridColumn,
+    TinyButton: Button
+  },
+  methods: {
+    change() {
+      this.cols = createNewCols()
+    }
+  },
+  data() {
+    return {
+      cols: [
+        {
+          field: 'name',
+          title: '名称',
+          header: {
+            value: `header-${times}`
+          }
+        },
+        {
+          field: 'area',
+          title: '所属区域',
+          default: {
+            value: `col-${times}`
+          }
+        }
+      ],
+      tableData: [
+        {
+          id: '1',
+          name: 'GFD科技YX公司',
+          area: '华东区',
+          address: '福州',
+          introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。'
+        },
+        {
+          id: '2',
+          name: 'WWWW科技YX公司',
+          area: '华南区',
+          address: '深圳福田区',
+          introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。'
+        }
+      ]
+    }
+  }
+}
+</script>
+
+<style scoped>
+.button-box {
+  margin-bottom: 20px;
+}
+</style>