feat: 表格的renderer配置支持events事件集合

Author: zzcr

examples/sites/demos/apis/grid.js

@@ -4096,8 +4096,9 @@ interface IExportCsvOptions {
 interface IEditorConfig {
   // 内置组件名称或者自定义组件实例
   component: 'input' | 'select' | Component
-  // 传递给组件的事件集合
+  // 传递给组件的事件集合(v3.23.0开始支持)
   events?: {
+    // change、click等
     [event]: () => void
   }
   // 传递给编辑器组件的属性集合

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

@@ -7,7 +7,7 @@
         field="boole"
         title="Vue 渲染器"
         align="center"
-        :renderer="{ component: TinySwitch }"
+        :renderer="{ component: TinySwitch, events: { change } }"
       ></tiny-grid-column>
       <tiny-grid-column field="area" title="区域"></tiny-grid-column>
       <tiny-grid-column field="createdDate" title="创建时间"></tiny-grid-column>
@@ -19,7 +19,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { TinySwitch, TinyGrid, TinyGridColumn } from '@opentiny/vue'
+import { TinySwitch, TinyGrid, TinyGridColumn, TinyModal } from '@opentiny/vue'
 
 const tableData = ref([
   {
@@ -117,4 +117,7 @@ const tableData = ref([
 function renderName(h, { row }) {
   return <span style="color:goldenrod">{row.name}</span>
 }
+const change = () => {
+  TinyModal.message('触发了change事件')
+}
 </script>

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

@@ -3,13 +3,8 @@ import { test, expect } from '@playwright/test'
 test('自定义渲染器', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('grid-renderer#renderer-custom-renderer')
-  await expect(page.getByText('GFD 科技 YX 公司').first()).toHaveCSS('color', 'rgb(218, 165, 32)')
-  await expect(
-    page
-      .getByRole('row', {
-        name: '2 WWW 科技 YX 公司 华南区 2016-07-08 12:36:22 300 公司技术和研发实力雄厚，是国家 863 项目的参与者，并被政府认定为“高新技术企业”。'
-      })
-      .locator('span')
-      .nth(1)
-  ).toBeVisible()
+  const demo = page.locator('#renderer-custom-renderer')
+  await expect(demo.getByText('GFD 科技 YX 公司').first()).toHaveCSS('color', 'rgb(218, 165, 32)')
+  await demo.locator('.tiny-switch').first().click()
+  await expect(page.getByText('触发了change事件')).toBeVisible()
 })

examples/sites/demos/pc/app/grid/renderer/custom-renderer.vue

@@ -7,7 +7,7 @@
         field="boole"
         title="Vue 渲染器"
         align="center"
-        :renderer="{ component: TinySwitch }"
+        :renderer="{ component: TinySwitch, events: { change } }"
       ></tiny-grid-column>
       <tiny-grid-column field="area" title="区域"></tiny-grid-column>
       <tiny-grid-column field="createdDate" title="创建时间"></tiny-grid-column>
@@ -18,7 +18,7 @@
 </template>
 
 <script lang="jsx">
-import { TinySwitch, TinyGrid, TinyGridColumn } from '@opentiny/vue'
+import { TinySwitch, TinyGrid, TinyGridColumn, TinyModal } from '@opentiny/vue'
 
 export default {
   components: {
@@ -125,6 +125,9 @@ export default {
   methods: {
     renderName(h, { row }) {
       return <span style="color:goldenrod">{row.name}</span>
+    },
+    change() {
+      TinyModal.message('触发了change事件')
     }
   }
 }

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

@@ -60,12 +60,13 @@ function processRenderer({ h, params, renderer, value }) {
     }
 
     if (renderer.component) {
-      const { component, attrs } = renderer
+      const { component, attrs, events } = renderer
 
       result.flag = true
       result.vnodes = [
         h(hooks.toRaw(component), {
           class: 'grid-cell',
+          on: events,
           attrs: {
             value,
             modelValue: value,