AG Grid：Vue3 Composition API用expose时组件缺少getValue()方法

问题根因 #

ag-grid 的 Vue3 适配器对「setup 直接返回渲染函数（TSX 写法）」的组件兼容存在缺陷，默认只会读取 setup 返回对象中的成员，不会主动从 expose 暴露的接口中拉取 getValue 这类编辑器要求的必填方法，就会出现方法无法被识别的问题。

可行解决方案 #

• 方案1：调整 setup 返回结构，不直接返回渲染函数，而是将渲染函数作为 render 属性，和需要暴露给 ag-grid 的方法一同返回，同时保留 expose 保证其他场景的访问逻辑正常：

export default defineComponent({
    name: 'LinesViewVersionEditor',
    props: ['params'],

    setup(props, { expose }) {
        const value = ref(props.params.value)
        const versionOptions = ref([])
        const changedValue = ref(false)
        const client = new Client({ baseURL: settings.ClientBaseUrl })

        const getValue = function () {
            console.log('getValue')
            return value.value
        }

        const updateValue = function (value: { version: number; entitySlug: string; entityVersionPk: number }) {
            props.params.api.stopEditing()
            changedValue.value = true
        }

        versionOptions.value = [
            {
                value: value.value,
                label: value.value?.version.toString()
            }
        ]

        // ...其他原有逻辑

        // 把原来直接返回的渲染函数赋值给render变量
        const render = () => (
            <Select
                showArrow={false}
                class={'ant-select-custom'}
                value={value.value?.version}
                options={versionOptions.value}
                onChange={ value => { updateValue(value) } }
                onClick={ async () => {
                    versionOptions.value = await getChildVersions(
                        client,
                        // ...你的原有参数
                    )
                }}
            />
        )

        expose({
            value,
            getValue
        })

        // 重点：返回包含render和getValue的对象，不要直接返回render函数
        return {
            render,
            getValue
        }
    }
})

• 方案2：如果不想调整现有TSX的返回写法，可以在组件选项中补充methods声明，ag-grid会优先读取methods中的方法：

export default defineComponent({
    name: 'LinesViewVersionEditor',
    props: ['params'],
    // 补充methods声明，ag-grid可以直接识别到
    methods: {
        getValue() {
            // 从组件实例的exposed属性中读取setup暴露的值
            return this.$.exposed.value.value
        }
    },
    setup(props, { expose }) {
        // 你原来的所有逻辑完全不变
        const value = ref(props.params.value)
        // ...其他原有逻辑
        expose({
            value,
            getValue
        })
        return () => (
            <Select {/* 原有组件逻辑 */} />
        )
    }
})

• 额外验证点：如果当前使用的ag-grid-vue3版本低于30.0.0，建议升级到最新稳定版，旧版本对Vue3组合式API的自定义编辑器支持存在较多已知兼容问题。

内容的提问来源于stack exchange，提问作者Alexander Nikolaev