npm - @opentiny/vue-docs - Versions diffs - 3.16.2 → 3.17.0 - Mend

@opentiny/vue-docs 3.16.2 → 3.17.0

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 (1135) hide show

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

@@ -1,66 +1,69 @@
 <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>
+  <div class="grid-box">
+    <tiny-grid
+      :data="tableData"
+      column-min-width="100"
+      auto-resize
+      :column-anchor="columnAnchor"
+      :optimization="{ scrollX: { gt: 20 } }"
+      height="auto"
+    >
+      <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>
+  </div>
 </template>
 <script>
@@ -130,3 +133,10 @@ export default {
   }
 }
 </script>
+<style scoped>
+.grid-box {
+  height: 240px;
+  overflow: hidden;
+}
+</style>

package/demos/pc/app/grid/mouse-keyboard/keyboard-config.spec.js CHANGED Viewed

@@ -4,6 +4,7 @@ test('键盘按键配置项测试', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('grid-mouse-keyboard#mouse-keyboard-keyboard-config')
   await page.getByRole('cell', { name: 'GFD科技YX公司' }).click()
-  await page.locator('body').press('ArrowDown')
+  await page.waitForTimeout(500)
+  await page.keyboard.press('ArrowDown')
   await expect(page.getByRole('cell', { name: 'WWWW科技YX公司' })).toHaveClass(/col__selected/)
 })

package/demos/pc/app/grid/operation-column/radio-config-composition-api.vue CHANGED Viewed

@@ -1,7 +1,7 @@
 <template>
   <tiny-grid ref="mytableRef" :radio-config="radioConfigData" :data="tableData">
     <tiny-grid-column type="index" width="60"></tiny-grid-column>
-    <tiny-grid-column type="radio" width="60"></tiny-grid-column>
+    <tiny-grid-column type="radio" width="100"></tiny-grid-column>
     <tiny-grid-column field="name" title="名称"></tiny-grid-column>
     <tiny-grid-column field="area" title="所属区域"></tiny-grid-column>
     <tiny-grid-column field="address" title="地址"></tiny-grid-column>

package/demos/pc/app/grid/operation-column/radio-config.vue CHANGED Viewed

@@ -1,7 +1,7 @@
 <template>
   <tiny-grid ref="mytable" :radio-config="radioConfigData" :data="tableData">
     <tiny-grid-column type="index" width="60"></tiny-grid-column>
-    <tiny-grid-column type="radio" width="60"></tiny-grid-column>
+    <tiny-grid-column type="radio" width="100"></tiny-grid-column>
     <tiny-grid-column field="name" title="名称"></tiny-grid-column>
     <tiny-grid-column field="area" title="所属区域"></tiny-grid-column>
     <tiny-grid-column field="address" title="地址"></tiny-grid-column>

package/demos/pc/app/grid/operation-column/selection-config.spec.js CHANGED Viewed

@@ -3,7 +3,18 @@ import { test, expect } from '@playwright/test'
 test('多选配置项', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('grid-operation-column#operation-column-selection-config')
-  await expect(page.locator('.tiny-grid-body__row').nth(0).locator('input')).toBeChecked()
-  await expect(page.locator('.tiny-grid-body__row').nth(1).locator('input')).toBeDisabled()
-  await expect(page.locator('.tiny-grid-body__row').nth(3).locator('input')).toBeDisabled()
+  const demo = page.locator('#operation-column-selection-config')
+  await expect(demo.locator('.tiny-grid-body__row').nth(0).locator('input')).toBeChecked()
+  await expect(demo.locator('.tiny-grid-body__row').nth(1).locator('input')).toBeDisabled()
+  await expect(demo.locator('.tiny-grid-body__row').nth(3).locator('input')).toBeDisabled()
+  await demo.locator('.tiny-grid-header__row').locator('.tiny-grid-checkbox').first().click()
+  await expect(demo.locator('.tiny-grid-body__row').nth(0).locator('input')).toBeChecked()
+  await expect(demo.locator('.tiny-grid-body__row').nth(2).locator('input')).toBeChecked()
+  await expect(demo.locator('.tiny-grid-body__row').nth(4).locator('input')).toBeChecked()
+  await expect(demo.locator('.tiny-grid-body__row').nth(6).locator('input')).toBeChecked()
+  await demo.locator('.tiny-grid-header__row').locator('.tiny-grid-checkbox').first().click()
+  await expect(demo.locator('.tiny-grid-body__row').nth(0).locator('input')).not.toBeChecked()
+  await expect(demo.locator('.tiny-grid-body__row').nth(2).locator('input')).not.toBeChecked()
+  await expect(demo.locator('.tiny-grid-body__row').nth(4).locator('input')).not.toBeChecked()
+  await expect(demo.locator('.tiny-grid-body__row').nth(6).locator('input')).not.toBeChecked()
 })

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

@@ -3,7 +3,7 @@ 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('-07-02').first()).toBeVisible()
   await expect(page.getByText('-02-15').first()).toBeVisible()
   await expect(page.getByText('-02-15').nth(1)).toBeVisible()
 })

package/demos/pc/app/grid/row-grouping/row-group-render-composition-api.vue CHANGED Viewed

@@ -1,5 +1,12 @@
 <template>
-  <tiny-grid class="row-group-render" height="200px" setting :row-group="renderOp" :data="data">
+  <tiny-grid
+    class="row-group-render"
+    height="320px"
+    setting
+    :row-group="renderOp"
+    :data="data"
+    @toggle-group-change="onToggleGroupChange"
+  >
     <tiny-grid-column type="index" width="60"></tiny-grid-column>
     <tiny-grid-column type="selection" width="60"></tiny-grid-column>
     <tiny-grid-column field="area" title="区域" sortable></tiny-grid-column>
@@ -10,26 +17,26 @@
   </tiny-grid>
 </template>
-<script setup lang="jsx">
+<script lang="jsx" setup>
 import { ref } from 'vue'
-import { Grid as TinyGrid, GridColumn as TinyGridColumn } from '@opentiny/vue'
+import { Grid as TinyGrid, GridColumn as TinyGridColumn, Modal } from '@opentiny/vue'
 const data = ref([
   {
     id: '1',
-    name: 'GFD科技YX公司',
+    name: 'GFD科技有限公司',
     area: '华东区',
     province: '福建省',
     city: '福州',
-    telephone: '1234567890'
+    telephone: '15010000001'
   },
   {
     id: '2',
-    name: 'WWW科技YX公司',
+    name: 'WWW科技有限公司',
     area: '华南区',
     province: '广东省',
     city: '深圳',
-    telephone: '1234567890'
+    telephone: '15010000002'
   },
   {
     id: '3',
@@ -37,47 +44,47 @@ const data = ref([
     area: '华南区',
     province: '广东省',
     city: '中山',
-    telephone: '1234567890'
+    telephone: '15010000003'
   },
   {
     id: '4',
-    name: 'TGB科技YX公司',
+    name: 'TGB科技有限公司',
     area: '华东区',
     province: '福建省',
     city: '龙岩',
-    telephone: '1234567890'
+    telephone: '15010000004'
   },
   {
     id: '5',
-    name: 'YHN科技YX公司',
+    name: 'YHN科技有限公司',
     area: '华南区',
     province: '广东省',
     city: '韶关',
-    telephone: '1234567890'
+    telephone: '15010000005'
   },
   {
     id: '6',
-    name: 'WSX科技YX公司',
+    name: 'WSX科技有限公司',
     area: '华中区',
     province: '湖北省',
     city: '黄冈',
-    telephone: '1234567890'
+    telephone: '15010000006'
   },
   {
     id: '7',
-    name: 'KBG物业YX公司',
+    name: 'KBG物业有限公司',
     area: '华中区',
     province: '湖北省',
     city: '赤壁',
-    telephone: '1234567890'
+    telephone: '15010000007'
   },
   {
     id: '8',
-    name: '深圳市福德宝网络技术YX公司',
+    name: '深圳市福德宝网络技术有限公司',
     address: '厦门岛内',
     area: '华东区',
     city: '厦门',
-    telephone: '1234567890'
+    telephone: '15010000008'
   },
   {
     id: '9',
@@ -85,7 +92,7 @@ const data = ref([
     area: '华南区',
     province: '广西省',
     city: '南宁',
-    telephone: '1234567890'
+    telephone: '15010000009'
   },
   {
     id: '10',
@@ -93,30 +100,25 @@ const data = ref([
     area: '华南区',
     province: '广西省',
     city: '北海',
-    telephone: '1234567890'
+    telephone: '15510000001'
   },
   {
     id: '11',
-    name: 'TIG管理YX公司',
+    name: 'TIG管理有限公司',
     area: '华南区',
     province: '广西省',
     city: '桂林',
-    telephone: '1234567890'
+    telephone: '15510000002'
   },
   {
     id: '12',
-    name: 'GGT科技YX公司',
+    name: 'GGT科技有限公司',
     area: '西南区',
     province: '云南省',
     city: '昆明',
-    telephone: '1234567890'
+    telephone: '15510000003'
   }
 ])
-const renderOp = ref({
-  field: 'area',
-  render: renderGroup,
-  closeable: true
-})
 function renderGroup(h, { value, header, children }) {
   return (
@@ -126,6 +128,30 @@ function renderGroup(h, { value, header, children }) {
     </span>
   )
 }
+function activeMethod({ value }) {
+  return value === '华南区' // 华南区分组默认展开
+  // return false // 所有分组默认收起
+}
+function onToggleGroupChange({ row }) {
+  Modal.message({ message: `分组${row.fold ? '合起' : '展开'}`, status: 'info' })
+}
+function renderGroupCell(h, { row, column }) {
+  if (row.value !== '华南区') return
+  if (column.property === 'province') {
+    return h('b', '自定义渲染省份')
+  } else if (column.property === 'city') {
+    return h('i', '自定义渲染城市')
+  }
+}
+const renderOp = ref({
+  field: 'area',
+  render: renderGroup,
+  closeable: true,
+  activeMethod,
+  renderGroupCell
+})
 </script>
 <style>

package/demos/pc/app/grid/row-grouping/row-group-render.spec.js CHANGED Viewed

@@ -4,4 +4,10 @@ test('自定义分组', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('grid-row-grouping#row-grouping-row-group-render')
   await expect(page.getByText('当前分组行数为1').first()).toBeVisible()
+  await expect(page.getByText('自定义渲染省份').first()).toBeVisible()
+  await expect(page.getByText('自定义渲染城市').first()).toBeVisible()
+  await page.getByText('当前分组行数为1').first().click()
+  await expect(page.locator('.tiny-modal').filter({ hasText: '分组展开' })).toBeVisible()
+  await page.getByText('当前分组行数为1').first().click()
+  await expect(page.locator('.tiny-modal').filter({ hasText: '分组合起' })).toBeVisible()
 })

package/demos/pc/app/grid/row-grouping/row-group-render.vue CHANGED Viewed

@@ -1,5 +1,12 @@
 <template>
-  <tiny-grid class="row-group-render" height="200px" setting :row-group="renderOp" :data="data">
+  <tiny-grid
+    class="row-group-render"
+    height="320px"
+    setting
+    :row-group="renderOp"
+    :data="data"
+    @toggle-group-change="onToggleGroupChange"
+  >
     <tiny-grid-column type="index" width="60"></tiny-grid-column>
     <tiny-grid-column type="selection" width="60"></tiny-grid-column>
     <tiny-grid-column field="area" title="区域" sortable></tiny-grid-column>
@@ -11,7 +18,7 @@
 </template>
 <script lang="jsx">
-import { Grid, GridColumn, Pager } from '@opentiny/vue'
+import { Grid, GridColumn, Modal } from '@opentiny/vue'
 export default {
   components: {
@@ -20,23 +27,22 @@ export default {
   },
   data() {
     return {
-      Pager,
       data: [
         {
           id: '1',
-          name: 'GFD科技YX公司',
+          name: 'GFD科技有限公司',
           area: '华东区',
           province: '福建省',
           city: '福州',
-          telephone: '1234567890'
+          telephone: '15010000001'
         },
         {
           id: '2',
-          name: 'WWW科技YX公司',
+          name: 'WWW科技有限公司',
           area: '华南区',
           province: '广东省',
           city: '深圳',
-          telephone: '1234567890'
+          telephone: '15010000002'
         },
         {
           id: '3',
@@ -44,47 +50,47 @@ export default {
           area: '华南区',
           province: '广东省',
           city: '中山',
-          telephone: '1234567890'
+          telephone: '15010000003'
         },
         {
           id: '4',
-          name: 'TGB科技YX公司',
+          name: 'TGB科技有限公司',
           area: '华东区',
           province: '福建省',
           city: '龙岩',
-          telephone: '1234567890'
+          telephone: '15010000004'
         },
         {
           id: '5',
-          name: 'YHN科技YX公司',
+          name: 'YHN科技有限公司',
           area: '华南区',
           province: '广东省',
           city: '韶关',
-          telephone: '1234567890'
+          telephone: '15010000005'
         },
         {
           id: '6',
-          name: 'WSX科技YX公司',
+          name: 'WSX科技有限公司',
           area: '华中区',
           province: '湖北省',
           city: '黄冈',
-          telephone: '1234567890'
+          telephone: '15010000006'
         },
         {
           id: '7',
-          name: 'KBG物业YX公司',
+          name: 'KBG物业有限公司',
           area: '华中区',
           province: '湖北省',
           city: '赤壁',
-          telephone: '1234567890'
+          telephone: '15010000007'
         },
         {
           id: '8',
-          name: '深圳市福德宝网络技术YX公司',
+          name: '深圳市福德宝网络技术有限公司',
           address: '厦门岛内',
           area: '华东区',
           city: '厦门',
-          telephone: '1234567890'
+          telephone: '15010000008'
         },
         {
           id: '9',
@@ -92,7 +98,7 @@ export default {
           area: '华南区',
           province: '广西省',
           city: '南宁',
-          telephone: '1234567890'
+          telephone: '15010000009'
         },
         {
           id: '10',
@@ -100,29 +106,31 @@ export default {
           area: '华南区',
           province: '广西省',
           city: '北海',
-          telephone: '1234567890'
+          telephone: '15510000001'
         },
         {
           id: '11',
-          name: 'TIG管理YX公司',
+          name: 'TIG管理有限公司',
           area: '华南区',
           province: '广西省',
           city: '桂林',
-          telephone: '1234567890'
+          telephone: '15510000002'
         },
         {
           id: '12',
-          name: 'GGT科技YX公司',
+          name: 'GGT科技有限公司',
           area: '西南区',
           province: '云南省',
           city: '昆明',
-          telephone: '1234567890'
+          telephone: '15510000003'
         }
       ],
       renderOp: {
         field: 'area',
         render: this.renderGroup,
-        closeable: true
+        closeable: true,
+        activeMethod: this.activeMethod,
+        renderGroupCell: this.renderGroupCell
       }
     }
   },
@@ -134,6 +142,22 @@ export default {
           <a>{'当前分组行数为' + children.length}</a>
         </span>
       )
+    },
+    activeMethod({ value }) {
+      return value === '华南区' // 华南区分组默认展开
+      // return false // 所有分组默认收起
+    },
+    onToggleGroupChange({ row }) {
+      Modal.message({ message: `分组${row.fold ? '合起' : '展开'}`, status: 'info' })
+    },
+    renderGroupCell(h, { row, column }) {
+      if (row.value !== '华南区') return
+      if (column.property === 'province') {
+        return h('b', '自定义渲染省份')
+      } else if (column.property === 'city') {
+        return h('i', '自定义渲染城市')
+      }
     }
   }
 }