datatable请求提供对外的列插槽，或者render提供jsx的形式，不必使用h函数

[pigIsDuck]

This function solves the problem (这个功能解决的问题)

当我想要对列进行自定义的时候，目前我只能使用h函数进行自定义，但是如果遇到一些列，里面可能填充很多其他的组件，比如hover显示更多信息啥的，单纯使用h函数，确实是有点痛苦
最简单就是提供 基于 key 的插槽名字，或者render函数可以支持 jsx的写法，这样做可以简化我想要自定义列元素的写法

Expected API (期望的 API)

1. 提供插槽：

 <n-data-table :columns="columns" :data="tableData" :bordered="false">
        <template #actions>
          <n-button text>那车头依然吐着烟</n-button>
        </template>
      </n-data-table>

2. render函数支持jsx写法

{
      title: '操作',
      key: 'actions',
      // useSlot: true,
      render(row) {
        return <n-button text>那车头依然吐着烟</n-button>
      }
    }

[pigIsDuck]

举个例子，如果我想要渲染这种表格，使用目前的render的话，那必定会陷入 h函数的疯狂嵌套，到最后代码，鬼来了都看不懂

[doooooit]

臣附议

[YangXiaoHei]

本来想搜别的，居然让我看到个刚刚自己解决掉的 issue....
step 1、npm i @vue/babel-plugin-jsx
step 2、在 babel.config.js 中加入这一行配置 plugins: ["@vue/babel-plugin-jsx"]
完成上面两部后，你已经可以愉快的写 jsx 了。如果你想在 SFC 中写 jsx 的话
step 3、在 SFC 文件中的 script 标签中加入 lang="jsx" 属性，然后，你就可以把所有 h 函数改成 jsx 了

[pigIsDuck]

本来想搜别的，居然让我看到个刚刚自己解决掉的 issue.... step 1、npm i @vue/babel-plugin-jsx step 2、在 babel.config.js 中加入这一行配置 plugins: ["@vue/babel-plugin-jsx"] 完成上面两部后，你已经可以愉快的写 jsx 了。如果你想在 SFC 中写 jsx 的话 step 3、在 SFC 文件中的 script 标签中加入 lang="jsx" 属性，然后，你就可以把所有 h 函数改成 jsx 了

感谢大佬，我去搜索了一下 vite + vue3使用jsx，得到了更好的解决办法，希望可以在文档里面补充一下，要不我这种笨蛋就很容易因为这个弃坑~

[markthree]

本来想搜别的，居然让我看到个刚刚自己解决掉的 issue.... step 1、npm i @vue/babel-plugin-jsx step 2、在 babel.config.js 中加入这一行配置 plugins: ["@vue/babel-plugin-jsx"] 完成上面两部后，你已经可以愉快的写 jsx 了。如果你想在 SFC 中写 jsx 的话 step 3、在 SFC 文件中的 script 标签中加入 lang="jsx" 属性，然后，你就可以把所有 h 函数改成 jsx 了

补充一下，如果使用 vite 可以下载 @vitejs/plugin-vue-jsx 这个插件。

任何在 vite.config.js 中注册该插件 👇

import { defineConfig } from "vue"
import Jsx from '@vitejs/plugin-vue-jsx'

export default defineConfig({
  plugins: [
    // 省略你的其他插件
    Jsx() // 注册 jsx 插件
  ]
})

然后就可以在 sfc 中愉快的使用 jsx 来书写 vnode 了

<script setup lang="jsx">
import { NButton } from "naive-ui"

const foo = <div>foo</div>

const config =  {
    title: '操作',
    key: 'actions',
     useSlot: true,
    render(row) {
     // 也支持 render 直接返回
      return <NButton>The front of the car is still smoking</NButton>
    } 
 }
</script>

<template>
  <!-- 支持直接渲染 -->
  <foo />
</template>

[DreamZhang97]

那插槽那种有解决的办法吗？表单的配置写在页面上，总觉得一堆常量配置页面中太麻烦，一写好多的。之前二次封装elementUi、ant design，都是通过插槽去渲染操作列，在父组件处理。

[fudiwei]

毛遂自荐 @skit/x.naive-ui，基于 Naive-UI 二次封装了 DataTable 组件，支持插槽式的写法。

[jahnli]

duplicate #4273