@opentiny/vue-docs 2.1.10 → 2.2.0

package/demos/pc/app/form/webdoc/form.js

@@ -210,6 +210,17 @@ export default {
           'By setting whether to hide the red asterisk in front of the label through <code>hide required asterisk</code> , it defaults to <code>false</code> , but under the SMB theme, it defaults to <code>true</code> .'
       },
       codeFiles: ['smb-required.vue']
+    },
+    {
+      demoId: 'popper-options',
+      name: { 'zh-CN': '错误提示配置', 'en-US': 'Error tip options' },
+      desc: {
+        'zh-CN':
+          '<p>通过 <code>popper-options</code> 设置<code>tip</code>类型错误提示，例如：当表单父元素是滚动元素，切页面滚动后，提示会错位，将 <code>bubbling</code> 属性设置为 <code>true</code>可解决此问题。</p>',
+        'en-US':
+          'Set the <code>tip</code> type error prompt through <code>popper-options</code>. For example, when the parent element of the form is a scrolling element and the page scrolls, the prompt will be misaligned. Change the <code>bubbling</code> attribute Set to <code>true</code> to resolve this issue.'
+      },
+      codeFiles: ['popper-options.vue']
     }
   ],
   apis: [
@@ -342,6 +353,17 @@ export default {
           },
           demoId: 'overflow-title'
         },
+        {
+          name: 'popper-options',
+          type: 'Popover.IPopperOption',
+          typeAnchorName: 'popover#IPopperOption',
+          'defaultValue': '',
+          desc: {
+            'zh-CN': '校验错误提示配置，透传至 Popover 组件',
+            'en-US': 'Verify error prompt configuration and transparently transmit it to Popover component'
+          },
+          demoId: 'popper-options'
+        },
         {
           name: 'rules',
           type: '{ [prop: string]: IFormRules | IFormRules[]  }',

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

@@ -1,6 +1,11 @@
 <template>
   <tiny-grid :row-class-name="rowClassName" :data="tableData" row-key :drop-config="dropConfig">
     <tiny-grid-column field="id" width="60"></tiny-grid-column>
+    <tiny-grid-column field="name" title="触发源" width="100">
+      <template #default>
+        <div class="only-me-can-drag">拖拽触发源</div>
+      </template>
+    </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>
@@ -8,7 +13,7 @@
   </tiny-grid>
 </template>
 
-<script setup lang="jsx">
+<script setup>
 import { ref } from 'vue'
 import { Grid as TinyGrid, GridColumn as TinyGridColumn } from '@opentiny/vue'
 import Sortable from 'sortablejs'
@@ -16,6 +21,7 @@ import Sortable from 'sortablejs'
 const dropConfig = ref({
   plugin: Sortable,
   row: true,
+  trigger: '.only-me-can-drag', // 触发源控制
   filter: '.row__drag-disable', // 根据行的类名来控制是否可以拖动
   onBeforeMove(type, row) {
     if (row.id === '8') return false // return false 时取消拖动
@@ -88,14 +94,20 @@ function rowClassName({ rowIndex }) {
 }
 </script>
 
-<style>
-.sortable-chosen {
+<style scoped>
+.tiny-grid :deep(.sortable-chosen) {
   background: #ceeea9 !important;
 }
-.sortable-drag {
+.tiny-grid :deep(.sortable-drag) {
   background: red !important;
 }
-.row__drag-disable {
+.tiny-grid :deep(.row__drag-disable) {
   background: #f1f1f1 !important;
 }
+.only-me-can-drag {
+  cursor: move;
+}
+.tiny-grid :deep(.row__drag-disable) .only-me-can-drag {
+  cursor: not-allowed;
+}
 </style>

package/demos/pc/app/grid/drag/row-drag-ctrl.spec.js

@@ -3,17 +3,29 @@ import { test, expect } from '@playwright/test'
 test('拖拽控制', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('grid-drag#drag-row-drag-ctrl')
-  const draggerDom = page.getByRole('cell', { name: 'RFV有限责任公司' })
+  const diabledDragDom = page.getByRole('cell', { name: '拖拽触发源1' })
   // 获取拖拽元素位置
-  const { x, y } = await draggerDom.boundingBox()
+  const { x, y } = await diabledDragDom.boundingBox()
   // 验证不可拖拽
-  await page.mouse.move(x + 2, y + 3)
-  await page.waitForTimeout(200)
+  await diabledDragDom.hover()
   await page.mouse.down()
   await page.waitForTimeout(200)
   await page.mouse.move(x, y + 160)
   await page.waitForTimeout(200)
   await page.mouse.up()
   await page.waitForTimeout(200)
-  await expect(page.locator('.tiny-grid-body__row').nth(5)).not.toContainText('RFV有限责任公司')
+  await expect(page.locator('.tiny-grid-body__row').nth(0)).toContainText('GFD科技YX公司')
+
+  const draggerDom = page.locator('#drag-row-drag-ctrl tbody').getByText('拖拽触发源6')
+  // 获取拖拽元素位置
+  const { x: left, y: top } = await draggerDom.boundingBox()
+  // 验证可拖拽
+  await draggerDom.hover()
+  await page.mouse.down()
+  await page.waitForTimeout(200)
+  await page.mouse.move(left, top - 200)
+  await page.waitForTimeout(200)
+  await page.mouse.up()
+  await page.waitForTimeout(200)
+  await expect(page.locator('.tiny-grid-body__row').nth(0)).toContainText('WSX科技YX公司')
 })

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

@@ -1,6 +1,11 @@
 <template>
   <tiny-grid :row-class-name="rowClassName" :data="tableData" row-key :drop-config="dropConfig">
     <tiny-grid-column field="id" width="60"></tiny-grid-column>
+    <tiny-grid-column field="name" title="触发源" width="100">
+      <template #default="{ row }">
+        <div class="only-me-can-drag">拖拽触发源{{ row.id }}</div>
+      </template>
+    </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>
@@ -8,7 +13,7 @@
   </tiny-grid>
 </template>
 
-<script lang="jsx">
+<script>
 import { Grid, GridColumn } from '@opentiny/vue'
 import Sortable from 'sortablejs'
 
@@ -22,6 +27,7 @@ export default {
       dropConfig: {
         plugin: Sortable,
         row: true,
+        trigger: '.only-me-can-drag', // 触发源控制
         filter: '.row__drag-disable', // 根据行的类名来控制是否可以拖动
         onBeforeMove(type, row) {
           if (row.id === '8') return false // return false 时取消拖动
@@ -98,14 +104,20 @@ export default {
 }
 </script>
 
-<style>
-.sortable-chosen {
+<style scoped>
+.tiny-grid :deep(.sortable-chosen) {
   background: #ceeea9 !important;
 }
-.sortable-drag {
+.tiny-grid :deep(.sortable-drag) {
   background: red !important;
 }
-.row__drag-disable {
+.tiny-grid :deep(.row__drag-disable) {
   background: #f1f1f1 !important;
 }
+.only-me-can-drag {
+  cursor: move;
+}
+.tiny-grid :deep(.row__drag-disable) .only-me-can-drag {
+  cursor: not-allowed;
+}
 </style>

package/demos/pc/app/grid/filter/dynamic-filter-composition-api.vue

@@ -0,0 +1,127 @@
+<template>
+  <tiny-grid :data="tableData" @toolbar-button-click="toolbarButtonClickEvent">
+    <template #toolbar>
+      <tiny-grid-toolbar :buttons="toolbarButtons"> </tiny-grid-toolbar>
+    </template>
+    <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="公司名称" :filter="nameFilter"></tiny-grid-column>
+    <tiny-grid-column field="employees" title="员工数"></tiny-grid-column>
+    <tiny-grid-column field="createdDate" title="创建日期"></tiny-grid-column>
+    <tiny-grid-column field="city" title="城市" :filter="cityFilter"></tiny-grid-column>
+  </tiny-grid>
+</template>
+
+<script setup>
+import { ref, reactive } from 'vue'
+import { Grid as TinyGrid, GridColumn as TinyGridColumn, GridToolbar as TinyGridToolbar } from '@opentiny/vue'
+
+const filteData = [
+  { label: '福州', value: '福州' },
+  { label: '深圳', value: '深圳' },
+  { label: '中山', value: '中山' },
+  { label: '龙岩', value: '龙岩' },
+  { label: '韶关', value: '韶关' }
+]
+
+const nameFilterData = [
+  { label: 'GFD科技YX公司', value: 'GFD科技YX公司' },
+  { label: 'WWW科技YX公司', value: 'WWW科技YX公司' }
+]
+
+let filterNumber = 1
+
+const toolbarButtons = [
+  {
+    code: 'changeCityFilter',
+    name: '动态改变城市列筛选项'
+  }
+]
+
+const tableData = reactive([
+  {
+    id: '1',
+    name: 'GFD科技YX公司',
+    city: '福州',
+    employees: 800,
+    createdDate: '2014-04-30 00:56:00'
+  },
+  {
+    id: '2',
+    name: 'WWW科技YX公司',
+    city: '深圳',
+    employees: 300,
+    createdDate: '2016-07-08 12:36:22'
+  },
+  {
+    id: '3',
+    name: 'RFV有限责任公司',
+    city: '中山',
+    employees: 1300,
+    createdDate: '2014-02-14 14:14:14'
+  },
+  {
+    id: '4',
+    name: 'TGB科技YX公司',
+    city: '龙岩',
+    employees: 360,
+    createdDate: '2013-01-13 13:13:13'
+  },
+  {
+    id: '5',
+    name: 'YHN科技YX公司',
+    city: '韶关',
+    employees: 810,
+    createdDate: '2012-12-12 12:12:12'
+  },
+  {
+    id: '6',
+    name: 'WSX科技YX公司',
+    city: '黄冈',
+    employees: 800,
+    createdDate: '2011-11-11 11:11:11'
+  },
+  {
+    id: '7',
+    name: 'KBG物业YX公司',
+    city: '赤壁',
+    employees: 400,
+    createdDate: '2016-04-30 23:56:00'
+  },
+  {
+    id: '8',
+    name: '深圳市福德宝网络技术YX公司',
+    city: '厦门',
+    employees: 540,
+    createdDate: '2016-06-03 13:53:25'
+  }
+])
+
+const cityFilter = reactive({
+  multi: true,
+  enumable: true,
+  defaultFilter: false,
+  inputFilter: false,
+  values: filteData
+})
+const nameFilter = reactive({
+  multi: true,
+  enumable: true,
+  defaultFilter: false,
+  inputFilter: true,
+  values: () => {
+    nameFilterData.push({ label: `GFD科技YX公司${filterNumber}`, value: 'GFD科技YX公司' })
+    filterNumber++
+    return Promise.resolve(nameFilterData)
+  }
+})
+
+const toolbarButtonClickEvent = ({ code, $grid }) => {
+  switch (code) {
+    case 'changeCityFilter': {
+      cityFilter.values.push({ label: '合肥', value: '合肥' })
+      break
+    }
+  }
+}
+</script>

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

@@ -0,0 +1,11 @@
+import { test, expect } from '@playwright/test'
+
+test('动态改变筛选项', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('grid-filter#filter-dynamic-filter')
+  await page.getByRole('button', { name: '动态改变城市列筛选项' }).click()
+  await page.getByRole('cell', { name: '城市' }).getByRole('img').click()
+  await expect(page.getByText('合肥')).toBeVisible()
+  await page.getByRole('cell', { name: '公司名称' }).getByRole('img').click()
+  await expect(page.getByText('GFD科技YX公司1')).toBeVisible()
+})

package/demos/pc/app/grid/filter/dynamic-filter.vue

@@ -0,0 +1,136 @@
+<template>
+  <tiny-grid :data="tableData" @toolbar-button-click="toolbarButtonClickEvent">
+    <template #toolbar>
+      <tiny-grid-toolbar :buttons="toolbarButtons"> </tiny-grid-toolbar>
+    </template>
+    <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="公司名称" :filter="nameFilter"></tiny-grid-column>
+    <tiny-grid-column field="employees" title="员工数"></tiny-grid-column>
+    <tiny-grid-column field="createdDate" title="创建日期"></tiny-grid-column>
+    <tiny-grid-column field="city" title="城市" :filter="cityFilter"></tiny-grid-column>
+  </tiny-grid>
+</template>
+
+<script>
+import { Grid, GridColumn, GridToolbar } from '@opentiny/vue'
+
+const filteData = [
+  { label: '福州', value: '福州' },
+  { label: '深圳', value: '深圳' },
+  { label: '中山', value: '中山' },
+  { label: '龙岩', value: '龙岩' },
+  { label: '韶关', value: '韶关' }
+]
+
+const nameFilterData = [
+  { label: 'GFD科技YX公司', value: 'GFD科技YX公司' },
+  { label: 'WWW科技YX公司', value: 'WWW科技YX公司' }
+]
+
+let filterNumber = 1
+
+export default {
+  components: {
+    TinyGrid: Grid,
+    TinyGridColumn: GridColumn,
+    TinyGridToolbar: GridToolbar
+  },
+  data() {
+    return {
+      toolbarButtons: [
+        {
+          code: 'changeCityFilter',
+          name: '动态改变城市列筛选项'
+        }
+      ],
+      tableData: [
+        {
+          id: '1',
+          name: 'GFD科技YX公司',
+          city: '福州',
+          employees: 800,
+          createdDate: '2014-04-30 00:56:00'
+        },
+        {
+          id: '2',
+          name: 'WWW科技YX公司',
+          city: '深圳',
+          employees: 300,
+          createdDate: '2016-07-08 12:36:22'
+        },
+        {
+          id: '3',
+          name: 'RFV有限责任公司',
+          city: '中山',
+          employees: 1300,
+          createdDate: '2014-02-14 14:14:14'
+        },
+        {
+          id: '4',
+          name: 'TGB科技YX公司',
+          city: '龙岩',
+          employees: 360,
+          createdDate: '2013-01-13 13:13:13'
+        },
+        {
+          id: '5',
+          name: 'YHN科技YX公司',
+          city: '韶关',
+          employees: 810,
+          createdDate: '2012-12-12 12:12:12'
+        },
+        {
+          id: '6',
+          name: 'WSX科技YX公司',
+          city: '黄冈',
+          employees: 800,
+          createdDate: '2011-11-11 11:11:11'
+        },
+        {
+          id: '7',
+          name: 'KBG物业YX公司',
+          city: '赤壁',
+          employees: 400,
+          createdDate: '2016-04-30 23:56:00'
+        },
+        {
+          id: '8',
+          name: '深圳市福德宝网络技术YX公司',
+          city: '厦门',
+          employees: 540,
+          createdDate: '2016-06-03 13:53:25'
+        }
+      ],
+      cityFilter: {
+        multi: true,
+        enumable: true,
+        defaultFilter: false,
+        inputFilter: false,
+        values: filteData
+      },
+      nameFilter: {
+        multi: true,
+        enumable: true,
+        defaultFilter: false,
+        inputFilter: true,
+        values: () => {
+          nameFilterData.push({ label: `GFD科技YX公司${filterNumber}`, value: 'GFD科技YX公司' })
+          filterNumber++
+          return Promise.resolve(nameFilterData)
+        }
+      }
+    }
+  },
+  methods: {
+    toolbarButtonClickEvent({ code, $grid }) {
+      switch (code) {
+        case 'changeCityFilter': {
+          this.cityFilter.values.push({ label: '合肥', value: '合肥' })
+          break
+        }
+      }
+    }
+  }
+}
+</script>

package/demos/pc/app/grid/slot/editor-slot-composition-api.vue

@@ -2,7 +2,7 @@
   <div>
     <tiny-grid :data="tableData" :edit-config="{ trigger: 'click', mode: 'row', showStatus: true }">
       <tiny-grid-column type="index" width="60"></tiny-grid-column>
-      <tiny-grid-column field="name" title="插槽自定义列编辑" :editor="{ component: 'input', autoselect: true }">
+      <tiny-grid-column field="name" title="插槽自定义列编辑" :editor="{}">
         <template #edit="data">
           <tiny-input v-model="data.row.name" placeholder="请输入内容"></tiny-input>
         </template>

package/demos/pc/app/grid/slot/editor-slot.vue

@@ -1,83 +1,82 @@
 <template>
-    <div>
-        <tiny-grid :data="tableData" :edit-config="{ trigger: 'click', mode: 'row', showStatus: true }">
-            <tiny-grid-column type="index" width="60"></tiny-grid-column>
-            <tiny-grid-column field="name" title="插槽自定义列编辑" :editor="{component: 'input', autoselect: true}">
-                <template #edit="data">
-                    <tiny-input v-model="data.row.name" 
-                        placeholder="请输入内容"></tiny-input>
-                </template>
-            </tiny-grid-column>
-            <tiny-grid-column field="employees" title="员工人数"></tiny-grid-column>
-            <tiny-grid-column field="area" title="所属区域"></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>
+  <div>
+    <tiny-grid :data="tableData" :edit-config="{ trigger: 'click', mode: 'row', showStatus: true }">
+      <tiny-grid-column type="index" width="60"></tiny-grid-column>
+      <tiny-grid-column field="name" title="插槽自定义列编辑" :editor="{}">
+        <template #edit="data">
+          <tiny-input v-model="data.row.name" placeholder="请输入内容"></tiny-input>
+        </template>
+      </tiny-grid-column>
+      <tiny-grid-column field="employees" title="员工人数"></tiny-grid-column>
+      <tiny-grid-column field="area" title="所属区域"></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 lang="jsx">
+
+<script>
 import { Grid, GridColumn, Input } from '@opentiny/vue'
 
 export default {
-    components: {
-        TinyGrid: Grid,
-        TinyGridColumn: GridColumn,
-        TinyInput: Input
-    },
-    data() {
-        return {
-            tableData: [
-                {
-                    id: '1',
-                    name: 'GFD科技YX公司',
-                    area: '华东区',
-                    address: '福州',
-                    employees: 423,
-                    introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。'
-                },
-                {
-                    id: '2',
-                    name: 'WWWW科技YX公司',
-                    area: '华南区',
-                    address: '深圳福田区',
-                    employees: 363,
-                    introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。'
-                },
-                {
-                    id: '3',
-                    name: 'RFV有限责任公司',
-                    area: '华南区',
-                    address: '中山市',
-                    employees: 131,
-                    introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。'
-                },
-                {
-                    id: '4',
-                    name: 'TGBYX公司',
-                    area: '华北区',
-                    address: '梅州',
-                    employees: 215,
-                    introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。'
-                },
-                {
-                    id: '5',
-                    name: 'YHN科技YX公司',
-                    area: '华南区',
-                    address: '韶关',
-                    employees: 322,
-                    introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。'
-                },
-                {
-                    id: '6',
-                    name: '康康物业YX公司',
-                    area: '华北区',
-                    address: '广州天河区',
-                    employees: 168,
-                    introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。'
-                }
-            ]
+  components: {
+    TinyGrid: Grid,
+    TinyGridColumn: GridColumn,
+    TinyInput: Input
+  },
+  data() {
+    return {
+      tableData: [
+        {
+          id: '1',
+          name: 'GFD科技YX公司',
+          area: '华东区',
+          address: '福州',
+          employees: 423,
+          introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。'
+        },
+        {
+          id: '2',
+          name: 'WWWW科技YX公司',
+          area: '华南区',
+          address: '深圳福田区',
+          employees: 363,
+          introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。'
+        },
+        {
+          id: '3',
+          name: 'RFV有限责任公司',
+          area: '华南区',
+          address: '中山市',
+          employees: 131,
+          introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。'
+        },
+        {
+          id: '4',
+          name: 'TGBYX公司',
+          area: '华北区',
+          address: '梅州',
+          employees: 215,
+          introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。'
+        },
+        {
+          id: '5',
+          name: 'YHN科技YX公司',
+          area: '华南区',
+          address: '韶关',
+          employees: 322,
+          introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。'
+        },
+        {
+          id: '6',
+          name: '康康物业YX公司',
+          area: '华北区',
+          address: '广州天河区',
+          employees: 168,
+          introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。'
         }
+      ]
     }
+  }
 }
-</script>
+</script>

package/demos/pc/app/grid/webdoc/grid-drag.js

@@ -18,7 +18,7 @@ export default {
       'name': { 'zh-CN': '拖拽控制', 'en-US': 'Drag Control' },
       'desc': {
         'zh-CN':
-          '<p>可以通过设置 <code>drop-config</code> 的 <code>onBeforeMove</code> 事件控制行拖动，也可以配置<code>drop-config</code> 的 <code>filter</code> 与自定义样式结合使用来限制拖动。</p>\n',
+          '<p>可以通过设置 <code>drop-config</code> 的 <code>onBeforeMove</code> 事件控制行拖动，配置<code>drop-config</code> 的 <code>trigger</code> 来指定拖拽的触发源（一般是 <code>class</code> 类名），也可以配置<code>drop-config</code> 的 <code>filter</code> 与自定义样式结合使用来限制拖动。</p>\n',
         'en-US':
           '<p>You can set the <code>onBeforeMove</code> event of <code>drop-config</code> to control row dragging. You can also configure <code>filter</code> of <code>drop-config</code> in conjunction with a custom style to restrict drag</p>\n'
       },

package/demos/pc/app/grid/webdoc/grid-filter.js

@@ -27,6 +27,15 @@ export default {
       },
       'codeFiles': ['filter/default-filter.vue']
     },
+    {
+      'demoId': 'filter-dynamic-filter',
+      'name': { 'zh-CN': '动态改变筛选项', 'en-US': 'Filter' },
+      'desc': {
+        'zh-CN': `<p>通过改变自定义的 <code>filter</code> 自定义筛选的规则中的 <code>values</code> 数组，或者将 <code>values</code> 定义成方法可以动态的返回筛选项`,
+        'en-US': ''
+      },
+      'codeFiles': ['filter/dynamic-filter.vue']
+    },
     {
       'demoId': 'filter-simple-filter',
       'name': { 'zh-CN': '简化版筛选-单选/多选菜单', 'en-US': 'Custom Parameter' },

package/demos/pc/app/grid/webdoc/grid-slot.js

@@ -23,7 +23,10 @@ export default {
     {
       'demoId': 'slot-editor-slot',
       'name': { 'zh-CN': '编辑器插槽', 'en-US': 'Editor slot' },
-      'desc': { 'zh-CN': '详细用法参考如下示例：', 'en-US': 'For details, see the following example.' },
+      'desc': {
+        'zh-CN': `<p>使用编辑器插槽的前提条件是：<code>grid</code> 标签上配置 <code>edit-config</code>。在 <code>grid-column</code> 列配置 <code>:editor="{}"</code> 。</p>`,
+        'en-US': 'For details, see the following example.'
+      },
       'codeFiles': ['slot/editor-slot.vue']
     },
     {