Table support slot for customColumn

[nabaonan]

What problem does the feature solve?

we can custom column in template with slot

What does the proposed API look like?

//  template:

 <n-data-table  :columns="columns" :data="data" >
        <template #slotName="{value,row,columnProp}" >
             <span >{{row.title}} {{value}} Custom things</span>
        </template>
</n-data-table>


........
// script:

setup() {

      return {
          data:[],
          columns:[{
                key:'name',
                title: 'name',
                slot:'slotName'
           }]
      }
}

Some pictures that can demonstrate the feature.

[07akioni]

Dynamic slot name is not a good pattern since it's very unfriendly to typescript. Personally I don't think this is a good API.

Currently vue's slot has no type but if some time later it supports it, the API will cause chaos.

The case you provide is not convicing since it doesn't show template slot is much easier than render function. If you could provide some more convincing examples, I will reopen the issue.

[yhyzgn]

那为啥官方会报出警告，并建议使用slot方式来提升性能呢？

而且使用h函数渲染会导致class等属性无效等问题
单组件自定义还行，多个组件自定义时就更不方便，而且难度不低哦
比如要实现这样de的效果：

貌似只能这么写吧：

{
  title: '操作',
  key: 'operation',
  render(row) {
    return [
      h(NButton, {
        text: true,
        onClick: () => {
        },
      }, '编辑'),
      h(NButton, {
        text: true,
        style: {
          marginLeft: '12px',
        },
        onClick: () => {
        },
      }, '删除'),
      h(NButton, {
        text: true,
        style: {
          marginLeft: '12px',
        },
        onClick: () => {
        },
      }, '重置密码'),
    ]
  },
},

[07akioni]

那为啥官方会报出警告，并建议使用slot方式来提升性能呢？

而且使用h函数渲染会导致class等属性无效等问题 单组件自定义还行，多个组件自定义时就更不方便，而且难度不低哦 比如要实现这样de的效果： 貌似只能这么写吧：

{
  title: '操作',
  key: 'operation',
  render(row) {
    return [
      h(NButton, {
        text: true,
        onClick: () => {
        },
      }, '编辑'),
      h(NButton, {
        text: true,
        style: {
          marginLeft: '12px',
        },
        onClick: () => {
        },
      }, '删除'),
      h(NButton, {
        text: true,
        style: {
          marginLeft: '12px',
        },
        onClick: () => {
        },
      }, '重置密码'),
    ]
  },
},

可以定义一个组件，包含着三个按钮然后暴露一些属性出来，那样渲染函数写起来会简单一些

[arnoson]

Since Vue 3.3 now supports typed Slots with defineSlots it would be great If you could reconsider this decision. For me, render functions feel were un-vue like. I know there a basic feature of vue, but it feels much more natural, to keep all template related stuff inside <template>. A lot of other vue component libraries support this (primevue, vant, ...). Overall I just like this library better, so having the choice between render functions and slots would make it perfect for me :)

[stylefieber]

If you want to use other components in the cell template or / and use template directives, it would be much easier to use with having slots available.

[fudiwei]

I created a project @skit/x.naive-ui based on Naive-UI, enables to use DataTable in template style. Welcome to improve it.

For the scenario proposed by OP, it can be written as:

<x-n-data-table :columns="columns" :data="data">
  <template #renderCell="{ column, rowData, value }">
    <span>{{ column.title }} {{ value }} Custom things</span>
  </template>
</x-n-data-table>