docs(grid): fix grid docs (#1137)

examples/sites/demos/pc/app/grid/custom-style/footer-style-composition-api.vue

@@ -1,8 +1,7 @@
 <template>
-  <div>
+  <div class="footer-style">
     <h4 class="title">自定义表尾行样式：</h4>
     <tiny-grid
-      class="grid-footer-row-style"
       :data="tableData"
       show-footer
       :footer-method="footerMethod"
@@ -18,7 +17,6 @@
     </tiny-grid>
     <h4 class="title">自定义表尾单元格样式：</h4>
     <tiny-grid
-      class="grid-footer-cell-style"
       :data="tableData"
       show-footer
       :footer-method="footerMethod"
@@ -29,7 +27,7 @@
       <tiny-grid-column type="selection" width="60"></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>
+      <tiny-grid-column field="createdDate" title="创建日期" :footer-class-name="footerClassName"></tiny-grid-column>
       <tiny-grid-column field="city" title="城市"></tiny-grid-column>
     </tiny-grid>
   </div>
@@ -138,24 +136,12 @@ const footerRowClassName = ({ $rowIndex }) => {
     return 'footer__row--green'
   }
 }
+
+const footerClassName = () => {
+  return 'footer__cell--red'
+}
 </script>
 
-<style>
-.grid-footer-cell-style .tiny-grid-footer__column.footer__cell--blue {
-  background-color: #2db7f5;
-  color: #fff;
-}
-
-.grid-footer-row-style .tiny-grid-footer__row.footer__row--red {
-  background-color: palevioletred;
-  color: #fff;
-}
-.grid-footer-row-style .tiny-grid-footer__row.footer__row--green {
-  background-color: green;
-  color: #fff;
-}
-</style>
-
 <style scoped>
 .title {
   font-size: 16px;
@@ -163,4 +149,21 @@ const footerRowClassName = ({ $rowIndex }) => {
   font-weight: bolder;
   color: #444;
 }
+.footer-style :deep(.tiny-grid-footer__column.footer__cell--blue) {
+  background-color: #2db7f5;
+  color: #fff;
+}
+
+.footer-style :deep(.tiny-grid-footer__row.footer__row--red) {
+  background-color: palevioletred;
+  color: #fff;
+}
+.footer-style :deep(.tiny-grid-footer__row.footer__row--green) {
+  background-color: green;
+  color: #fff;
+}
+.footer-style :deep(.footer__cell--red) {
+  background-color: palevioletred;
+  color: #fff;
+}
 </style>

examples/sites/demos/pc/app/grid/custom-style/footer-style.spec.js

@@ -4,6 +4,7 @@ test('自定义表尾行样式', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('grid-custom-style#custom-style-footer-style')
   await expect(page.locator('.footer__row--red')).toHaveCSS('background-color', 'rgb(219, 112, 147)')
+  await expect(page.locator('.footer__cell--red').first()).toHaveCSS('background-color', 'rgb(219, 112, 147)')
   await expect(page.locator('.footer__row--green')).toHaveCSS('background-color', 'rgb(0, 128, 0)')
   await expect(page.locator('.footer__cell--blue')).toHaveCSS('background-color', 'rgb(45, 183, 245)')
 })

examples/sites/demos/pc/app/grid/custom-style/footer-style.vue

@@ -1,8 +1,7 @@
 <template>
-  <div>
+  <div class="footer-style">
     <h4 class="title">自定义表尾行样式：</h4>
     <tiny-grid
-      class="grid-footer-row-style"
       :data="tableData"
       show-footer
       :footer-method="footerMethod"
@@ -18,7 +17,6 @@
     </tiny-grid>
     <h4 class="title">自定义表尾单元格样式：</h4>
     <tiny-grid
-      class="grid-footer-cell-style"
       :data="tableData"
       show-footer
       :footer-method="footerMethod"
@@ -29,7 +27,7 @@
       <tiny-grid-column type="selection" width="60"></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>
+      <tiny-grid-column field="createdDate" title="创建日期" :footer-class-name="footerClassName"></tiny-grid-column>
       <tiny-grid-column field="city" title="城市"></tiny-grid-column>
     </tiny-grid>
   </div>
@@ -145,27 +143,14 @@ export default {
       if ($rowIndex === 1) {
         return 'footer__row--green'
       }
+    },
+    footerClassName() {
+      return 'footer__cell--red'
     }
   }
 }
 </script>
 
-<style>
-.grid-footer-cell-style .tiny-grid-footer__column.footer__cell--blue {
-  background-color: #2db7f5;
-  color: #fff;
-}
-
-.grid-footer-row-style .tiny-grid-footer__row.footer__row--red {
-  background-color: palevioletred;
-  color: #fff;
-}
-.grid-footer-row-style .tiny-grid-footer__row.footer__row--green {
-  background-color: green;
-  color: #fff;
-}
-</style>
-
 <style scoped>
 .title {
   font-size: 16px;
@@ -173,4 +158,21 @@ export default {
   font-weight: bolder;
   color: #444;
 }
+.footer-style :deep(.tiny-grid-footer__column.footer__cell--blue) {
+  background-color: #2db7f5;
+  color: #fff;
+}
+
+.footer-style :deep(.tiny-grid-footer__row.footer__row--red) {
+  background-color: palevioletred;
+  color: #fff;
+}
+.footer-style :deep(.tiny-grid-footer__row.footer__row--green) {
+  background-color: green;
+  color: #fff;
+}
+.footer-style :deep(.footer__cell--red) {
+  background-color: palevioletred;
+  color: #fff;
+}
 </style>

examples/sites/demos/pc/app/grid/custom-style/header-style-composition-api.vue

@@ -1,7 +1,7 @@
 <template>
-  <div>
+  <div class="header-style">
     <h4 class="title">自定义表头行样式：</h4>
-    <tiny-grid class="grid-header-row-style" :data="tableData" :header-row-class-name="headerRowClassName">
+    <tiny-grid :data="tableData" :header-row-class-name="headerRowClassName">
       <tiny-grid-column type="index" width="60"></tiny-grid-column>
       <tiny-grid-column type="selection" width="60"></tiny-grid-column>
       <tiny-grid-column field="name" title="公司名称"></tiny-grid-column>
@@ -10,12 +10,12 @@
       <tiny-grid-column field="city" title="城市"></tiny-grid-column>
     </tiny-grid>
     <h4 class="title">自定义表头单元格样式：</h4>
-    <tiny-grid class="grid-header-cell-style" :data="tableData" :header-cell-class-name="headerCellClassName">
+    <tiny-grid :data="tableData" :header-cell-class-name="headerCellClassName">
       <tiny-grid-column type="index" width="60"></tiny-grid-column>
       <tiny-grid-column type="selection" width="60"></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>
+      <tiny-grid-column field="createdDate" :header-class-name="headerClassName" title="创建日期"></tiny-grid-column>
       <tiny-grid-column field="city" title="城市"></tiny-grid-column>
     </tiny-grid>
   </div>
@@ -95,17 +95,11 @@ const headerCellClassName = ({ column }) => {
     return 'header__cell--blue'
   }
 }
-</script>
 
-<style>
+const headerClassName = () => {
-.grid-header-row-style .tiny-grid-header__row.header__row--red {
+  return 'header-blue'
-  background-color: palevioletred;
 }
-.grid-header-cell-style .tiny-grid-header__column.header__cell--blue {
+</script>
-  background-color: #2db7f5;
-  color: #fff;
-}
-</style>
 
 <style scoped>
 .title {
@@ -114,4 +108,15 @@ const headerCellClassName = ({ column }) => {
   font-weight: bolder;
   color: #444;
 }
+.header-style :deep(.tiny-grid-header__row.header__row--red) {
+  background-color: palevioletred;
+}
+.header-style :deep(.tiny-grid-header__column.header__cell--blue) {
+  background-color: #2db7f5;
+  color: #fff;
+}
+.header-style :deep(.header-blue) {
+  background-color: #2db7f5;
+  color: #fff;
+}
 </style>

examples/sites/demos/pc/app/grid/custom-style/header-style.spec.js

@@ -5,4 +5,5 @@ test('自定义表头样式', async ({ page }) => {
   await page.goto('grid-custom-style#custom-style-header-style')
   await expect(page.locator('.header__row--red')).toHaveCSS('background-color', 'rgb(219, 112, 147)')
   await expect(page.locator('.header__cell--blue')).toHaveCSS('background-color', 'rgb(45, 183, 245)')
+  await expect(page.locator('.header-blue')).toHaveCSS('background-color', 'rgb(45, 183, 245)')
 })

examples/sites/demos/pc/app/grid/custom-style/header-style.vue

@@ -1,7 +1,7 @@
 <template>
-  <div>
+  <div class="header-style">
     <h4 class="title">自定义表头行样式：</h4>
-    <tiny-grid class="grid-header-row-style" :data="tableData" :header-row-class-name="headerRowClassName">
+    <tiny-grid :data="tableData" :header-row-class-name="headerRowClassName">
       <tiny-grid-column type="index" width="60"></tiny-grid-column>
       <tiny-grid-column type="selection" width="60"></tiny-grid-column>
       <tiny-grid-column field="name" title="公司名称"></tiny-grid-column>
@@ -10,12 +10,12 @@
       <tiny-grid-column field="city" title="城市"></tiny-grid-column>
     </tiny-grid>
     <h4 class="title">自定义表头单元格样式：</h4>
-    <tiny-grid class="grid-header-cell-style" :data="tableData" :header-cell-class-name="headerCellClassName">
+    <tiny-grid :data="tableData" :header-cell-class-name="headerCellClassName">
       <tiny-grid-column type="index" width="60"></tiny-grid-column>
       <tiny-grid-column type="selection" width="60"></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>
+      <tiny-grid-column field="createdDate" :header-class-name="headerClassName" title="创建日期"></tiny-grid-column>
       <tiny-grid-column field="city" title="城市"></tiny-grid-column>
     </tiny-grid>
   </div>
@@ -101,21 +101,14 @@ export default {
       if (column.property === 'name') {
         return 'header__cell--blue'
       }
+    },
+    headerClassName() {
+      return 'header-blue'
     }
   }
 }
 </script>
 
-<style>
-.grid-header-row-style .tiny-grid-header__row.header__row--red {
-  background-color: palevioletred;
-}
-.grid-header-cell-style .tiny-grid-header__column.header__cell--blue {
-  background-color: #2db7f5;
-  color: #fff;
-}
-</style>
-
 <style scoped>
 .title {
   font-size: 16px;
@@ -123,4 +116,15 @@ export default {
   font-weight: bolder;
   color: #444;
 }
+.header-style :deep(.tiny-grid-header__row.header__row--red) {
+  background-color: palevioletred;
+}
+.header-style :deep(.tiny-grid-header__column.header__cell--blue) {
+  background-color: #2db7f5;
+  color: #fff;
+}
+.header-style :deep(.header-blue) {
+  background-color: #2db7f5;
+  color: #fff;
+}
 </style>

examples/sites/demos/pc/app/grid/custom/column-width-composition-api.vue

@@ -5,7 +5,7 @@
     </template>
     <tiny-grid-column field="name" title="名称"></tiny-grid-column>
     <tiny-grid-column field="employees" title="员工数"></tiny-grid-column>
-    <tiny-grid-column field="address" title="地址"></tiny-grid-column>
+    <tiny-grid-column field="address" :resizable="false" title="地址"></tiny-grid-column>
     <tiny-grid-column field="introduction" title="公司简介" show-overflow></tiny-grid-column>
   </tiny-grid>
 </template>

examples/sites/demos/pc/app/grid/custom/column-width.vue

@@ -5,7 +5,7 @@
     </template>
     <tiny-grid-column field="name" title="名称"></tiny-grid-column>
     <tiny-grid-column field="employees" title="员工数"></tiny-grid-column>
-    <tiny-grid-column field="address" title="地址"></tiny-grid-column>
+    <tiny-grid-column field="address" :resizable="false" title="地址"></tiny-grid-column>
     <tiny-grid-column field="introduction" title="公司简介" show-overflow></tiny-grid-column>
   </tiny-grid>
 </template>

examples/sites/demos/pc/app/grid/custom/prsonalized-drag.vue

@@ -1,7 +1,12 @@
 <template>
   <tiny-grid :data="tableData" :resizable="true" border>
     <template #toolbar>
-      <tiny-grid-toolbar id="custom-sort-columns" :resizable="{ storage: true }" :setting="setting"></tiny-grid-toolbar>
+      <tiny-grid-toolbar
+        id="custom-sort-columns"
+        @on-before-move="onBeforeMove"
+        :resizable="{ storage: true }"
+        :setting="setting"
+      ></tiny-grid-toolbar>
     </template>
     <tiny-grid-column type="index" width="40"></tiny-grid-column>
     <tiny-grid-column type="selection" width="40"></tiny-grid-column>
@@ -23,6 +28,11 @@ export default {
     TinyGridColumn: GridColumn,
     TinyGridToolbar: GridToolbar
   },
+  methods: {
+    onBeforeMove() {
+      alert(11)
+    }
+  },
   data() {
     return {
       Sortable,

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

@@ -5,7 +5,7 @@
       ref="theGridRef"
       :data="tableData"
       seq-serial
-      :edit-config="{ trigger: 'manual', mode: 'row', autoClear: false }"
+      :edit-config="{ trigger: 'manual', mode: 'cell', autoClear: false }"
     >
       <tiny-grid-column type="index" width="60"></tiny-grid-column>
       <tiny-grid-column field="name" title="名称" :editor="{ component: 'input', autoselect: true }"></tiny-grid-column>
@@ -93,9 +93,17 @@ const tableData = ref([
 const theGridRef = ref('theGridRef')
 
 function editRowEvent(row) {
-  theGridRef.value.setActiveRow(row).then(() => {
+  if (row.name === 'RFV有限责任公司') {
-    getActiveRow()
+    // 只激活区域单元格编辑
-  })
+    theGridRef.value.setActiveCell(row, 'area').then(() => {
+      this.getActiveRow()
+    })
+  } else {
+    // mode: 'cell' 时默认激活第一个单元格
+    theGridRef.value.setActiveRow(row).then(() => {
+      this.getActiveRow()
+    })
+  }
 }
 
 function saveRowEvent() {

examples/sites/demos/pc/app/grid/edit/trigger-mode-hm-editing.spec.js

@@ -11,5 +11,10 @@ test('手动触发编辑', async ({ page }) => {
     })
     .getByRole('button', { name: '编辑' })
     .click()
-  await expect(page.getByRole('row', { name: '1 保存 取消' }).locator('input[type="text"]')).toBeVisible()
+  await expect(
+    page.getByRole('row', { name: '1 华东区 福州 公司技术和研发实力雄厚，是国家863' }).getByRole('textbox')
+  ).toBeVisible()
+
+  await page.getByRole('row', { name: '3 RFV' }).getByRole('button').click()
+  await expect(page.getByRole('combobox')).toBeVisible()
 })

examples/sites/demos/pc/app/grid/edit/trigger-mode-hm-editing.vue

@@ -5,7 +5,7 @@
       ref="theGrid"
       :data="tableData"
       seq-serial
-      :edit-config="{ trigger: 'manual', mode: 'row', autoClear: false }"
+      :edit-config="{ trigger: 'manual', mode: 'cell', autoClear: false }"
     >
       <tiny-grid-column type="index" width="60"></tiny-grid-column>
       <tiny-grid-column field="name" title="名称" :editor="{ component: 'input', autoselect: true }"></tiny-grid-column>
@@ -101,9 +101,17 @@ export default {
   },
   methods: {
     editRowEvent(row) {
-      this.$refs.theGrid.setActiveRow(row).then(() => {
+      if (row.name === 'RFV有限责任公司') {
-        this.getActiveRow()
+        // 只激活区域单元格编辑
-      })
+        this.$refs.theGrid.setActiveCell(row, 'area').then(() => {
+          this.getActiveRow()
+        })
+      } else {
+        // mode: 'cell' 时默认激活第一个单元格
+        this.$refs.theGrid.setActiveRow(row).then(() => {
+          this.getActiveRow()
+        })
+      }
     },
     saveRowEvent() {
       this.$refs.theGrid.clearActived().then(() => {

examples/sites/demos/pc/app/grid/highlight/highlight-hover-row-composition-api.vue

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

examples/sites/demos/pc/app/grid/highlight/highlight-hover-row.vue

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

examples/sites/demos/pc/app/grid/validation/before-submit-validation-composition-api.vue

@@ -62,6 +62,10 @@ const toolbarButtons = ref([
   {
     code: 'savePromise',
     name: '保存（Promise）'
+  },
+  {
+    code: 'fullValidate',
+    name: '全量数据校验'
   }
 ])
 const tableData = ref([
@@ -183,6 +187,19 @@ function toolbarButtonClickEvent({ code }) {
         })
       break
     }
+    case 'fullValidate': {
+      basicGridRef.value
+        .fullValidate()
+        .then(() => {
+          TinyModal.alert('校验成功，触发了then！')
+        })
+        .catch((error) => {
+          // eslint-disable-next-line no-console
+          console.log(error)
+          TinyModal.alert('校验不通过，触发了catch')
+        })
+      break
+    }
   }
 }
 </script>

examples/sites/demos/pc/app/grid/validation/before-submit-validation.vue

@@ -64,6 +64,10 @@ export default {
         {
           code: 'savePromise',
           name: '保存（Promise）'
+        },
+        {
+          code: 'fullValidate',
+          name: '全量数据校验'
         }
       ],
       tableData: [
@@ -186,6 +190,19 @@ export default {
             })
           break
         }
+        case 'fullValidate': {
+          this.$refs.basicGrid
+            .fullValidate()
+            .then(() => {
+              TinyModal.alert('校验成功，触发了then！')
+            })
+            .catch((error) => {
+              // eslint-disable-next-line no-console
+              console.log(error)
+              TinyModal.alert('校验不通过，触发了catch')
+            })
+          break
+        }
       }
     }
   }

examples/sites/demos/pc/app/grid/validation/valid-config-composition-api.vue

@@ -1,141 +0,0 @@
-<template>
-  <div>
-    <tiny-grid
-      :data="tableData"
-      :edit-config="{ trigger: 'click', mode: 'cell', showStatus: true }"
-      :valid-config="{ message: 'inline' }"
-      :edit-rules="validRules"
-    >
-      <tiny-grid-column type="index" width="60"></tiny-grid-column>
-      <tiny-grid-column field="name" title="名称" :editor="{ component: 'input' }"></tiny-grid-column>
-      <tiny-grid-column field="area" title="区域" :editor="{ component: 'input' }"></tiny-grid-column>
-      <tiny-grid-column field="address" title="地址" :editor="{ component: 'input' }"></tiny-grid-column>
-      <tiny-grid-column field="introduction" title="公司简介" :editor="{ component: 'input' }"></tiny-grid-column>
-    </tiny-grid>
-  </div>
-</template>
-
-<script setup lang="jsx">
-import { ref } from 'vue'
-import { Grid as TinyGrid, GridColumn as TinyGridColumn } from '@opentiny/vue'
-
-const validRules = {
-  name: [
-    { required: true, message: '名称必填' },
-    { min: 3, max: 50, message: '名称长度在 3 到 50 个字符' }
-  ],
-  area: {
-    type: 'string',
-    required: true,
-    validator: (rule, value) => ['华东区', '华南区', '华中区'].includes(value),
-    message: '区域格式不正确'
-  },
-  address: {
-    type: 'string',
-    validator: (rule, value) => {
-      return new Promise((resolve, reject) => {
-        if (!value) {
-          reject(new Error('地址不能为空'))
-        } else if (value.length > 10) {
-          reject(new Error('地址过长'))
-        } else {
-          resolve()
-        }
-      })
-    }
-  }
-}
-
-const tableData = ref([
-  {
-    id: '1',
-    name: 'GFD科技YX公司',
-    userId: 421000103624183,
-    area: '华东区',
-    province: '福建省',
-    city: '福州',
-    contact: '许生',
-    telephone: '1234567890',
-    address: '福州',
-    ipaddress: '192.168.111.111',
-    introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。',
-    employees: 800,
-    createdDate: '2014-04-30 00:56:00',
-    boole: false,
-    assets: '1000000',
-    rate: 0.9
-  },
-  {
-    id: '2',
-    name: 'WWW科技YX公司',
-    userId: 421000103624183,
-    area: '华南区',
-    province: '广东省',
-    city: '深圳',
-    contact: '朱生',
-    telephone: '1234567890',
-    address: '深圳福田区',
-    ipaddress: '192.168.111.1',
-    introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。',
-    employees: 300,
-    createdDate: '2016-07-08 12:36:22',
-    boole: true,
-    assets: '1500000',
-    rate: 0.7
-  },
-  {
-    id: '3',
-    name: 'RFV有限责任公司',
-    userId: 441047913162396,
-    area: '华南区',
-    province: '广东省',
-    city: '中山',
-    contact: '秦生',
-    telephone: '1234567890',
-    address: '中山市',
-    ipaddress: '192.168.111.120',
-    introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。',
-    employees: 1300,
-    createdDate: '2014-02-14 14:14:14',
-    boole: false,
-    assets: '1500000',
-    rate: 0.6
-  },
-  {
-    id: '4',
-    name: 'TGB科技YX公司',
-    userId: 702973890055088,
-    area: '华东区',
-    province: '福建省',
-    city: '龙岩',
-    contact: '周生',
-    telephone: '1234567890',
-    address: '龙岩',
-    ipaddress: '192.168.11.111',
-    introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。',
-    employees: 360,
-    createdDate: '2013-01-13 13:13:13',
-    boole: true,
-    assets: '1200000',
-    rate: 0.5
-  },
-  {
-    id: '5',
-    name: 'YHN科技YX公司',
-    userId: 702973890055088,
-    area: '华南区',
-    province: '广东省',
-    city: '韶关',
-    contact: '郑生',
-    telephone: '1234567890',
-    address: '韶关',
-    ipaddress: '192.168.101.111',
-    introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。',
-    employees: 810,
-    createdDate: '2012-12-12 12:12:12',
-    boole: true,
-    assets: '1500000',
-    rate: 0.6
-  }
-])
-</script>

examples/sites/demos/pc/app/grid/validation/valid-config.vue

@@ -1,150 +0,0 @@
-<template>
-  <div>
-    <tiny-grid
-      :data="tableData"
-      :edit-config="{ trigger: 'click', mode: 'cell', showStatus: true }"
-      :valid-config="{ message: 'inline' }"
-      :edit-rules="validRules"
-    >
-      <tiny-grid-column type="index" width="60"></tiny-grid-column>
-      <tiny-grid-column field="name" title="名称" :editor="{ component: 'input' }"></tiny-grid-column>
-      <tiny-grid-column field="area" title="区域" :editor="{ component: 'input' }"></tiny-grid-column>
-      <tiny-grid-column field="address" title="地址" :editor="{ component: 'input' }"></tiny-grid-column>
-      <tiny-grid-column field="introduction" title="公司简介" :editor="{ component: 'input' }"></tiny-grid-column>
-    </tiny-grid>
-  </div>
-</template>
-
-<script lang="jsx">
-import { Grid, GridColumn } from '@opentiny/vue'
-
-export default {
-  components: {
-    TinyGrid: Grid,
-    TinyGridColumn: GridColumn
-  },
-  data() {
-    const validRules = {
-      name: [
-        { required: true, message: '名称必填' },
-        { min: 3, max: 50, message: '名称长度在 3 到 50 个字符' }
-      ],
-      area: {
-        type: 'string',
-        required: true,
-        validator: (rule, value) => ['华东区', '华南区', '华中区'].includes(value),
-        message: '区域格式不正确'
-      },
-      address: {
-        type: 'string',
-        validator: (rule, value) => {
-          return new Promise((resolve, reject) => {
-            if (!value) {
-              reject(new Error('地址不能为空'))
-            } else if (value.length > 10) {
-              reject(new Error('地址过长'))
-            } else {
-              resolve()
-            }
-          })
-        }
-      }
-    }
-    return {
-      validRules,
-      tableData: [
-        {
-          id: '1',
-          name: 'GFD科技YX公司',
-          userId: 421000103624183,
-          area: '华东区',
-          province: '福建省',
-          city: '福州',
-          contact: '许生',
-          telephone: '1234567890',
-          address: '福州',
-          ipaddress: '192.168.111.111',
-          introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。',
-          employees: 800,
-          createdDate: '2014-04-30 00:56:00',
-          boole: false,
-          assets: '1000000',
-          rate: 0.9
-        },
-        {
-          id: '2',
-          name: 'WWW科技YX公司',
-          userId: 421000103624183,
-          area: '华南区',
-          province: '广东省',
-          city: '深圳',
-          contact: '朱生',
-          telephone: '1234567890',
-          address: '深圳福田区',
-          ipaddress: '192.168.111.1',
-          introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。',
-          employees: 300,
-          createdDate: '2016-07-08 12:36:22',
-          boole: true,
-          assets: '1500000',
-          rate: 0.7
-        },
-        {
-          id: '3',
-          name: 'RFV有限责任公司',
-          userId: 441047913162396,
-          area: '华南区',
-          province: '广东省',
-          city: '中山',
-          contact: '秦生',
-          telephone: '1234567890',
-          address: '中山市',
-          ipaddress: '192.168.111.120',
-          introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。',
-          employees: 1300,
-          createdDate: '2014-02-14 14:14:14',
-          boole: false,
-          assets: '1500000',
-          rate: 0.6
-        },
-        {
-          id: '4',
-          name: 'TGB科技YX公司',
-          userId: 702973890055088,
-          area: '华东区',
-          province: '福建省',
-          city: '龙岩',
-          contact: '周生',
-          telephone: '1234567890',
-          address: '龙岩',
-          ipaddress: '192.168.11.111',
-          introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。',
-          employees: 360,
-          createdDate: '2013-01-13 13:13:13',
-          boole: true,
-          assets: '1200000',
-          rate: 0.5
-        },
-        {
-          id: '5',
-          name: 'YHN科技YX公司',
-          userId: 702973890055088,
-          area: '华南区',
-          province: '广东省',
-          city: '韶关',
-          contact: '郑生',
-          telephone: '1234567890',
-          address: '韶关',
-          ipaddress: '192.168.101.111',
-          introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。',
-          employees: 810,
-          createdDate: '2012-12-12 12:12:12',
-          boole: true,
-          assets: '1500000',
-          rate: 0.6
-        }
-      ]
-    }
-  }
-}
-</script>

examples/sites/demos/pc/app/grid/webdoc/grid-custom-style.js

@@ -7,7 +7,7 @@ export default {
       'name': { 'zh-CN': '自定义表头样式', 'en-US': 'Set the table header style' },
       'desc': {
         'zh-CN':
-          '<p>通过 <code>header-cell-class-name</code> 和 <code>header-row-class-name</code> 设置表头的单元格和行样式</p>\n<h3>设置表头单元格样式。</h3>\n',
+          '<p>通过 <code>header-cell-class-name</code> 和 <code>header-row-class-name</code> 设置表头的单元格和行样式。或者使用表格列的属性 <code>header-class-name</code> 设置表头单元格样式</p>',
         'en-US':
           '<p>Set the cell and row styles of the table header through <code>header-cell-class-name</code> and <code>header-row-class-name</code></p>\n<h3>Set the cell style of the table header</h3>\n'
       },
@@ -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> 设置表尾的单元格和行样式。</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'
       },

examples/sites/demos/pc/app/grid/webdoc/grid-custom.js

@@ -7,7 +7,7 @@ export default {
       'name': { 'zh-CN': '本地存储列宽', 'en-US': 'Column Width' },
       'desc': {
         'zh-CN':
-          '<p>在 <code>grid</code> 标签上配置 <code>resizable=&quot;true&quot;</code> 可以调整列宽，并在 <code>toolbar</code> 标签上配置 <code>resizable=&quot;{storage: true}&quot;</code> 保存在本地的 <code>localStroage</code> 里，刷新页面表格的列宽按照拖动后的列宽显示。</p>\n',
+          '<p>在 <code>grid</code> 标签上配置 <code>resizable=&quot;true&quot;</code> 可以调整列宽，<code>grid-column</code> 标签上配置 <code>resizable=&quot;false&quot;</code> 可以配置某一列不能调整列宽。并在 <code>toolbar</code> 标签上配置 <code>resizable=&quot;{storage: true}&quot;</code> 保存在本地的 <code>localStroage</code> 里，刷新页面表格的列宽按照拖动后的列宽显示。</p>\n',
         'en-US':
           '<p>Configure <code>resizable=&quot;true&quot;</code> on the <code>grid</code> tag to adjust the column width, and configure <code>resizable=&quot;{storage: true}&quot;</code> on the <code>toolbar</code> tag to save the column width in <code>localStroage</code> on the local host. The column width of the table on the refreshed page is displayed based on the column width after being dragged.</p>\n'
       },

examples/sites/demos/pc/app/grid/webdoc/grid.js

@@ -68,7 +68,7 @@ export default {
             'en-US':
               'The row group attribute can be configured. Columns with the same value are displayed in a row group.'
           },
-          'demoId': 'grid-row-grouping#row-grouping'
+          'demoId': 'grid-row-grouping#row-grouping-row-grouping'
         },
         {
           'name': 'toolbar',
@@ -376,7 +376,7 @@ export default {
           'type': 'VueComponent',
           'defaultValue': '--',
           'desc': { 'zh-CN': '自定义表格loading', 'en-US': 'Whether the table is being loaded.' },
-          'demoId': 'grid-loading#grid-custom-loading'
+          'demoId': 'grid-loading#loading-grid-custom-loading'
         },
         {
           'name': 'max-height',
@@ -855,10 +855,10 @@ export default {
             'zh-CN': '用于单选行，手动清空用户的选择',
             'en-US': 'This is used to select a single row. Manually clear the user selection.'
           },
-          'demoId': 'grid-operation-column#operation-column-default-serial-column'
+          'demoId': 'grid-operation-column#operation-column-clear-and-set-radio-row'
         },
         {
-          'name': 'clearRowExpand()',
+          'name': 'clearRowExpand',
           'type': '()=> void',
           'defaultValue': '--',
           'desc': {
@@ -1021,7 +1021,7 @@ export default {
             'zh-CN': '获取表格的可视列，也可以指定索引获取列',
             'en-US': 'Obtains the visual column of the table or specifies the index to obtain the column.'
           },
-          'demoId': 'grid-dynamically-columns#dynamically-columns-columns-dynamic'
+          'demoId': 'grid-custom#custom-server-storage'
         },
         {
           'name': 'getCurrentRow',
@@ -1219,7 +1219,7 @@ export default {
             'en-US':
               'Inserts one or more rows into a table. Second parameter: row specified position (tree tables are not supported), null inserted from the first row, and –1 inserted from the last row'
           },
-          'demoId': 'grid-toolbar#toolbar-insert-delete-update'
+          'demoId': 'grid-toolbar#toolbar-insert-remove-rows'
         },
         {
           'name': 'loadColumn',
@@ -1275,7 +1275,7 @@ export default {
             'en-US':
               'Data data is refreshed synchronously. If this method is used, the component does not record the status of adding, deleting, and modifying, and can only implement the corresponding logic. (This parameter may be used in some special scenarios, for example, when a node element in a deep tree changes.)'
           },
-          'demoId': 'grid-tree-grid#tree-table-tree-grid-insert-delete-update'
+          'demoId': 'grid-tree-table#tree-table-tree-grid-insert-delete-update'
         },
         {
           'name': 'reloadCustoms',
@@ -1423,14 +1423,14 @@ export default {
           'demoId': 'grid-tree-table#tree-table-set-tree-expansion'
         },
         {
-          'name': 'setCurrentRow(row)',
+          'name': 'setCurrentRow',
           'type': '(row: IRow)=> Promise',
           'defaultValue': '--',
           'desc': {
             'zh-CN': '用于当前行，设置某一行为高亮状态',
             'en-US': 'Sets the highlight status of a row for the current row.'
           },
-          'demoId': 'grid-highlight#highlight-highlight-hover-row'
+          'demoId': 'grid-highlight#highlight-set-current-row'
         },
         {
           'name': 'setRadioRow',
@@ -1525,7 +1525,7 @@ export default {
             'zh-CN': '用于可树形表格，切换展开树形节点',
             'en-US': 'This parameter is used to switch and expand tree nodes in a tree table.'
           },
-          'demoId': 'grid-expand#expand-set-row-expansion'
+          'demoId': 'grid-expand#expand-set-tree-expansion'
         },
         {
           'name': 'validate',
@@ -1574,7 +1574,7 @@ export default {
             'en-US':
               'This event is valid only when toolbar.buttons are configured. This event is triggered when a toolbar button is clicked'
           },
-          'demoId': 'grid-toolbar#toolbar-insert-delete-update'
+          'demoId': 'grid-event#event-toolbar-button-click-event'
         },
         {
           'name': 'cell-click',
@@ -1585,7 +1585,7 @@ export default {
             'zh-CN': '单元格被点击时会触发该事件',
             'en-US': 'This event is triggered when a cell is clicked'
           },
-          'demoId': 'grid-event#event-cell-click-event'
+          'demoId': 'grid-event#event-click-event'
         },
         {
           'name': 'cancel-page-change',
@@ -1618,7 +1618,7 @@ export default {
             'zh-CN': '单元格被双击时会触发该事件',
             'en-US': 'This event is triggered when a cell is double-clicked'
           },
-          'demoId': 'grid-event#event-cell-click-event'
+          'demoId': 'grid-event#event-click-event'
         },
         {
           'name': 'cell-mouseenter',
@@ -1675,7 +1675,7 @@ export default {
             'zh-CN': '单元格被激活编辑时会触发该事件',
             'en-US': 'This event is triggered when a cell is activated for editing'
           },
-          'demoId': 'grid-event#event-edit-actived-event'
+          'demoId': 'grid-event#event-edit-event'
         },
         {
           'name': 'edit-closed',
@@ -1686,7 +1686,7 @@ export default {
             'zh-CN': '单元格编辑状态下被关闭时会触发该事件',
             'en-US': 'This event is triggered when a cell is closed in the editing state'
           },
-          'demoId': 'grid-event#event-edit-actived-event'
+          'demoId': 'grid-event#event-edit-event'
         },
         {
           'name': 'edit-disabled',
@@ -1697,7 +1697,7 @@ export default {
             'zh-CN': '当单元格激活时如果是禁用状态时会触发该事件',
             'en-US': 'This event is triggered when a cell is activated and is disabled'
           },
-          'demoId': 'grid-event#event-edit-actived-event'
+          'demoId': 'grid-event#event-edit-event'
         },
         {
           'name': 'filter-change',
@@ -2331,7 +2331,7 @@ export default {
             'zh-CN': '列宽拖动配置（需要设置 id）',
             'en-US': 'Column width dragging configuration (id needs to be set)'
           },
-          'demoId': 'grid-customized#custom-column-width'
+          'demoId': 'grid-custom#custom-column-width'
         },
         {
           'name': 'setting',
@@ -2415,7 +2415,7 @@ export default {
             'zh-CN': '当工具栏的按钮被点击时会后触发该事件',
             'en-US': 'This event is triggered when a button on the toolbar is clicked'
           },
-          'demoId': 'grid-event#event-toolbar-button-click-event'
+          'demoId': 'grid-validation#validation-before-submit-validation'
         },
         {
           'name': 'save-setting',
@@ -2450,16 +2450,6 @@ export default {
             'en-US': 'Click the Reset button on the personalized panel to trigger the event.'
           },
           'demoId': 'grid-custom#custom-ordercolumn-local'
-        },
-        {
-          'name': 'on-before-move',
-          'type': `(type: 'column' | 'row', row: IRow)=> boolean`,
-          'defaultValue': '--',
-          'desc': {
-            'zh-CN': '个性化面板拖拽前事件',
-            'en-US': 'event before the personalized panel is dragged'
-          },
-          'demoId': 'grid-custom#custom-prsonalized-drag'
         }
       ]
     }