vue-easytable 自定义筛选框 render（）报错——已解决

背景

前端小白，因工作调动，正在努力自学；记录一下遇到的问题和解决办法。
问题都很小白，高手请掠过~~

问题

因工作需要搭建一个移动端的简单网页： vue2 项目 vantUI
由于vantUI没有表格组件，所以考虑引入一个表格组件包
最终选择了vue-easytable

在设置自定义筛选的时候依据官方教程的代码写入render()自定义模板的时候代码一直报错，纯小白，花了一点时间搜索才知道这里是用了jsx语言；

filterCustom: {
                            defaultVisible: true,
                            render: ({ showFn, closeFn }, h) => {
                                return (
                                    <div class="custom-name-filter">
                                        <input
                                            value={this.searchValue}
                                            on-input={(e) => (this.searchValue = e.target.value)}
                                            placeholder="Search name"
                                        />
                                        <div class="custom-name-filter-operation">
                                            <span
                                                class="name-filter-cancel"
                                                on-click={() => this.searchCancel(closeFn)}
                                            >
                                                取消
                                            </span>
                                            <span
                                                class="name-filter-confirm"
                                                on-click={() => this.searchConfirm(closeFn)}
                                            >
                                                查询
                                            </span>
                                        </div>
                                    </div>
                                );
                            },
                        },
                    },

解决办法

知道问题所在就好说了，因为我使用的是vue2框架，并不自带支持jsx，所以要给我的项目安装支持包
项目是使用Rsbuild构建的，查找官方文档：
Vue2JSX插件
跟着教程完成配置文件的修改~

搞定！