feat(grid): add expand trigger slot

examples/sites/demos/apis/grid.js

@@ -57,8 +57,8 @@ export default {
         },
         {
           name: 'cell-class-name',
-          typeAnchorName: 'IClassNameArgs',
-          type: 'string | (args: IClassNameArgs) => string',
+          typeAnchorName: 'ICellClassNameArgs',
+          type: 'string | (args: ICellClassNameArgs) => string',
           defaultValue: '',
           desc: {
             'zh-CN': '给单元格附加 className，也可以是函数',
@@ -2967,6 +2967,20 @@ export default {
           mode: ['pc', 'mobile-first'],
           pcDemo: 'grid-slot#slot-editor-slot'
         },
+        {
+          name: 'expand-trigger',
+          defaultValue: '',
+          meta: {
+            stable: '3.25.0'
+          },
+          desc: {
+            'zh-CN':
+              '自定义展开行图标，作用插槽参数说明：slots.expand-trigger({ $table, column, row },h)，$table：表格组件对象，column：当前列配置，row：当前行数据,h：vue的渲染函数',
+            'en-US': 'Customized expand row icon'
+          },
+          mode: ['pc', 'mobile-first'],
+          pcDemo: 'grid-expand#expand-trigger-slot'
+        },
         {
           name: 'filter',
           defaultValue: '',
@@ -3194,18 +3208,24 @@ interface IRow {
       depTypes: ['IValidRules'],
       code: `
 interface IColumnConfig {
-  type: 'index' | 'radio' | 'checkbox'
+  // 功能列的类型， 'index'行索引，'radio' 单选行， 'selection' 多选行
+  type: 'index' | 'radio' | 'selection'
+  // 列id
   id: string
-  prop: string
+  // 校验规则
   rules: IValidRules
+  // 是否必填
   required: boolean
   property: string
   title: string
-  label: string
+  // 列宽度
   width: string | number
+  // 自动分配宽度时的最小宽度
   minWidth: string | number
+  // 是否可以调整列宽
   resizable: boolean
-  fixed: boolean
+  // 是否左、右冻结
+  fixed: 'left' | 'right'
   align: 'left' | 'center' | 'right'
   headerAlign: 'left' | 'center' | 'right'
   footerAlign: 'left' | 'center' | 'right'
@@ -4153,6 +4173,30 @@ interface IFilterConfig {
         sortable?: Sortable 
       }
       `
+    },
+    {
+      name: 'ICellClassNameArgs',
+      type: 'type',
+      depTypes: ['IColumnConfig', 'IRow'],
+      code: `
+interface ICellClassNameArgs {
+  seq: number
+  // 当前行在树表中的层级
+  level: number
+  // 当前行数据
+  row: IRow
+  // 表格数据
+  data: IRow[]
+  // 表格行索引
+  rowIndex: number
+  $rowIndex: number
+  // 表格列配置
+  column: IColumnConfig
+  // 所有列中(包含隐藏列)索引
+  columnIndex: number
+  // 已渲染列中的索引
+  $columnIndex: number
+}`
     }
   ]
 }

examples/sites/demos/pc/app/grid/expand/expand-trigger-slot-composition-api.vue

@@ -0,0 +1,85 @@
+<template>
+  <div>
+    <tiny-grid ref="expandGridRef" :data="tableData" @toggle-expand-change="handleExpand">
+      <tiny-grid-column type="index" width="60"></tiny-grid-column>
+      <tiny-grid-column type="expand" width="120">
+        <template #expand-trigger="{ row, $table }">
+          <tiny-button>{{ $table.hasRowExpand(row) ? '收起' : '展开' }}</tiny-button>
+        </template>
+        <template #default="data">
+          <ul>
+            <li>
+              <span>公司名称：</span>
+              <span>{{ data.row.name }}</span>
+            </li>
+            <li>
+              <span>区域：</span>
+              <span>{{ data.row.area }}</span>
+            </li>
+            <li>
+              <span>员工数：</span>
+              <span>{{ data.row.employees }}</span>
+            </li>
+            <li>
+              <span>公司简介：</span>
+              <span>{{ data.row.introduction }}</span>
+            </li>
+          </ul>
+        </template>
+      </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="employees" title="员工数"></tiny-grid-column>
+    </tiny-grid>
+  </div>
+</template>
+
+<script setup lang="jsx">
+import { ref } from 'vue'
+import { TinyGrid, TinyGridColumn, TinyModal, TinyButton } from '@opentiny/vue'
+
+const tableData = ref([
+  {
+    id: '1',
+    pid: '0',
+    name: 'GFD 科技 YX 公司',
+    area: '华东区',
+    employees: '800',
+    introduction: '公司技术和研发实力雄厚，是国家 863 项目的参与者，并被政府认定为“高新技术企业”。'
+  },
+  {
+    id: '2',
+    pid: '0',
+    name: 'WWWW 科技 YX 公司',
+    area: '华南区',
+    employees: '500',
+    introduction: '公司技术和研发实力雄厚，是国家 863 项目的参与者，并被政府认定为“高新技术企业”。'
+  },
+  {
+    id: '4',
+    pid: '0',
+    name: 'TGBYX 公司',
+    area: '华南区',
+    employees: '360',
+    introduction: '公司技术和研发实力雄厚，是国家 863 项目的参与者，并被政府认定为“高新技术企业”。'
+  },
+  {
+    id: '7',
+    pid: '0',
+    name: '康康物业 YX 公司',
+    area: '华南区',
+    employees: '400',
+    introduction: '公司技术和研发实力雄厚，是国家 863 项目的参与者，并被政府认定为“高新技术企业”。'
+  }
+])
+const expandGridRef = ref()
+
+function handleExpand({ row, rowIndex }) {
+  if (expandGridRef.value.hasRowExpand(row)) {
+    TinyModal.message({
+      message: `当前展开行：${JSON.stringify(rowIndex + 1)}`,
+      status: 'info'
+    })
+  }
+}
+</script>

examples/sites/demos/pc/app/grid/expand/expand-trigger-slot.spec.ts

@@ -0,0 +1,11 @@
+import { test, expect } from '@playwright/test'
+
+test('检查当前行是否展开', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('grid-expand#expand-trigger-slot')
+  await page.locator('#expand-trigger-slot .tiny-grid-body__row').first().locator('.tiny-button').click()
+  await expect(page.locator('div').filter({ hasText: '当前展开行：1' }).nth(1)).toBeVisible()
+  await expect(page.locator('.tiny-grid-body__expanded-cell')).toHaveText(
+    '公司名称：GFD 科技 YX 公司区域：华东区员工数：800公司简介：公司技术和研发实力雄厚，是国家 863 项目的参与者，并被政府认定为“高新技术企业”。'
+  )
+})

examples/sites/demos/pc/app/grid/expand/expand-trigger-slot.vue

@@ -0,0 +1,95 @@
+<template>
+  <div>
+    <tiny-grid ref="expandGrid" :data="tableData" @toggle-expand-change="handleExpand">
+      <tiny-grid-column type="index" width="60"></tiny-grid-column>
+      <tiny-grid-column type="expand" width="120">
+        <template #expand-trigger="{ row, $table }">
+          <tiny-button>{{ $table.hasRowExpand(row) ? '收起' : '展开' }}</tiny-button>
+        </template>
+        <template #default="data">
+          <ul>
+            <li>
+              <span>公司名称：</span>
+              <span>{{ data.row.name }}</span>
+            </li>
+            <li>
+              <span>区域：</span>
+              <span>{{ data.row.area }}</span>
+            </li>
+            <li>
+              <span>员工数：</span>
+              <span>{{ data.row.employees }}</span>
+            </li>
+            <li>
+              <span>公司简介：</span>
+              <span>{{ data.row.introduction }}</span>
+            </li>
+          </ul>
+        </template>
+      </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="employees" title="员工数"></tiny-grid-column>
+    </tiny-grid>
+  </div>
+</template>
+
+<script lang="jsx">
+import { TinyGrid, TinyGridColumn, TinyModal, TinyButton } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyGrid,
+    TinyGridColumn,
+    TinyButton
+  },
+  data() {
+    return {
+      tableData: [
+        {
+          id: '1',
+          pid: '0',
+          name: 'GFD 科技 YX 公司',
+          area: '华东区',
+          employees: '800',
+          introduction: '公司技术和研发实力雄厚，是国家 863 项目的参与者，并被政府认定为“高新技术企业”。'
+        },
+        {
+          id: '2',
+          pid: '0',
+          name: 'WWWW 科技 YX 公司',
+          area: '华南区',
+          employees: '500',
+          introduction: '公司技术和研发实力雄厚，是国家 863 项目的参与者，并被政府认定为“高新技术企业”。'
+        },
+        {
+          id: '4',
+          pid: '0',
+          name: 'TGBYX 公司',
+          area: '华南区',
+          employees: '360',
+          introduction: '公司技术和研发实力雄厚，是国家 863 项目的参与者，并被政府认定为“高新技术企业”。'
+        },
+        {
+          id: '7',
+          pid: '0',
+          name: '康康物业 YX 公司',
+          area: '华南区',
+          employees: '400',
+          introduction: '公司技术和研发实力雄厚，是国家 863 项目的参与者，并被政府认定为“高新技术企业”。'
+        }
+      ]
+    }
+  },
+  methods: {
+    handleExpand({ row, rowIndex }) {
+      if (this.$refs.expandGrid.hasRowExpand(row)) {
+        TinyModal.message({
+          message: `当前展开行：${JSON.stringify(rowIndex + 1)}`,
+          status: 'info'
+        })
+      }
+    }
+  }
+}
+</script>

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

@@ -15,6 +15,17 @@ export default {
       },
       codeFiles: ['expand/has-row-expand.vue']
     },
+    {
+      demoId: 'expand-trigger-slot',
+      name: { 'zh-CN': '展开行触发器插槽', 'en-US': 'Expand row trigger slot' },
+      desc: {
+        'zh-CN': `
+        <p>通过 <code>expand-trigger</code> 插槽可以自定义展开行图标。</p>
+        `,
+        'en-US': '<p>You can customize the expand row icon through the <code>expand-trigger</code> slot. </p>\n'
+      },
+      codeFiles: ['expand/expand-trigger-slot.vue']
+    },
     {
       demoId: 'expand-expand-config',
       name: { 'zh-CN': '展开行配置项', 'en-US': 'Basic Usage' },

packages/vue/src/grid/src/cell/src/cell.ts

@@ -652,7 +652,7 @@ export const Cell = {
   },
   // 展开行
   renderExpandCell(h, params) {
-    let { $table, row } = params
+    let { $table, row, column } = params
     let { expandConfig = {} } = $table
     let { showIcon = true, activeMethod: expandMethod } = expandConfig
     let hideExpand = typeof expandMethod === 'function' ? expandMethod(row) : true
@@ -661,6 +661,9 @@ export const Cell = {
 
     if (!showIcon) return null
 
+    const expandTrigger = column.slots?.['expand-trigger']
+    const triggerContent = expandTrigger ? expandTrigger(params, h) : h('i', { class: 'tiny-grid__expand-icon' })
+
     const map = {
       expandActive: 'expand__active'
     }
@@ -684,7 +687,7 @@ export const Cell = {
             }
           }
         },
-        [hideExpand && h('i', { class: 'tiny-grid__expand-icon' })]
+        [hideExpand && triggerContent]
       )
     ]
   },