你认同DataTable的设计方案么？

[sunjc]

个人认为页面展现和数据构造全部依赖JS，不是一个好的方案。页面元素还是应在HTML中定义，这样更直观、易于理解，也更容易在表格内定义复杂的元素，不必使用麻烦的h()。

[07akioni]

我个人认为 Vue 目前对于 TS 的支持不值得我去为 DataTable 实现 slot API。这是个 tradeoff，工程上的考量。

至于你说的问题，确实是的，slot 写起来会轻松一些。但是还是不会做，除非 Vue 的 slots 能正确的定义类型。

[07akioni]

序号可以自己增加一个序号列，map 很简单，格式化可以用 render 函数或者自己在 map 的过程中 format

[07akioni]

slot可以参考一下antdv，虽然也比较复杂，但比在JS中定义简单、灵活些。另外，如何实现表格序号、格式化数据？

Slot API 的优缺点和使用方式我清楚，近期没有添加的计划

[sunjc]

补充，序列号也可以使用render实现：
render(row: any, index: number) {
return h('span', index + 1)
}

[ManiaJack]

slot可以参考一下antdv，虽然也比较复杂，但比在JS中定义简单、灵活些。另外，如何实现表格序号、格式化数据？

不用 TS 的话可以自己包装一下 DataTable，把 slot 写到 render 函数里面就可以了，类似

column.render = (row) => h('span', {}, slots[column.key]({ row }));

formatter 之类的都可以包到 render 里面去实现。

[TickHeart]

@ManiaJack 如果使用ts的话呢，如何保证 slot data 拥有正确的类型

[sunjc]

还有两个问题，在setup中如何实现DataTable国际化？如何使scoped的CSS对表格内定义（render）的元素生效？

[07akioni]

这得看应用怎么写了，vue 国际化方案很多，自己挑一个就行。

第二个问题我也不是很清楚，可能需要一些稍微 hack 的方法，这个就需要自己多试试了，很可能 vue 的文档里没有这种内容。

[sunjc]

1. 国际化使用了vue-i18n，在setup中调用useI18n()即可获得t函数，如下：
   import {useI18n} from 'vue-i18n'
   const {t} = useI18n()

2. 在scss或less中可以使用::v-deep，如下：
   ::v-deep(.classname) {
   ...
   }

[Xwudao]

@07akioni 作者大大，那对于table来说，我想在"Action"中插入多个按钮，只能使用h函数吗？

使用h函数太麻烦了，比如我的每个按钮都有很多属性，如果通过h函数，那太慢太复杂了（特别是很多属性和事件需要写）。

有什么优雅点的方法吗？

[07akioni]

写一个新的组件，在 h 的时候只 h 新的组件，把复杂的逻辑放入新组件

[Xwudao]

写一个新的组件，在 h 的时候只 h 新的组件，把复杂的逻辑放入新组件

多谢老大！

[greenhat616]

其实还能tsx（手动狗头）

[idranme]

我选择直接引入element-plus的table组件🤣

[Nakus0426]

那不如直接引vxe-table

[07akioni]

那不如直接引vxe-table

vxe 的功能确实很多，看了就知道很认真的做了

[vodka1998]

我要想一个像thing一样来控制表格的字段，checkBox或者tags

[Gxuebin]

@07akioni 作者大大 底部固定 这个怎么搞 总结栏搞不定，有固定列 的显示错位
element-plus ：https://element-plus.gitee.io/zh-CN/component/table.html#table-%E6%8F%92%E6%A7%BD
插入至表格最后一行之后的内容， 如果需要对表格的内容进行无限滚动操作，可能需要用到这个 slot。 若表格有合计行，该 slot 会位于合计行之上。

[07akioni]

这个确实暂时没提供这个功能，会考虑搞一下

[Gxuebin]

感谢

[evanlong0803]

希望能像这样自定义插槽，如果 slot 为 true 插槽名就和 key 同名。
这样作为用户的角度来说也能够自主选择是否使用插槽
如果非要说开发体验的角度来说，就算插槽暂时不具备类型提示，使用插槽也会比 h 函数的体验好很多

const columns: DataTableColumns<IArticle> = [
  {
    type: 'selection',
  },
  {
    title: '标题',
    key: 'title',
  },
  {
    title: '标签',
    key: 'tags',
    slot: true
  },
  {
    title: '创建时间',
    key: 'createTime',
  },
  {
    title: '更新时间',
    key: 'updateTime',
  },
]

[evanlong0803]

如果打死不采用 slot 的话，可以采用示例 <script lang="tsx" setup>
搭配上自动导入插件，其中的 n-tag n-time 组件就不需要进行导入了
这是比 h 函数更佳的体验，不仅有类型提示也更灵活直观
列如这样：

const columns: DataTableColumns<IArticle> = [
  {
    type: 'selection',
  },
  {
    title: '标题',
    key: 'title',
  },
  {
    title: '标签',
    key: 'tags',
    render: (row) => {
      return (
        <div class="space-x-2">
          {row.tags.map((tag) => (
            <n-tag round bordered={false} type="success">
              {tag.name}
            </n-tag>
          ))}
        </div>
      )
    },
  },
  {
    title: '创建时间',
    key: 'createTime',
    render: (row) => <n-time time={new Date(row.createTime)} />,
  },
  {
    title: '更新时间',
    key: 'updateTime',
    render: (row) => <n-time time={new Date()} to={new Date(row.updateTime)} type="relative" />,
  },
]

[lidakun-six]

dataTable它缺少了数据更新的时候重新刷新onUpdateCheckedRowKeys函数选中的值的功能，
希望可以在数据更新的时候加一个刷新checked值的Api，这个功能的缺少导致dataTble缺失了许多实用性

[fudiwei]

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

[jahnli]

https://www.naiveui.com/zh-CN/os-theme/docs/community

[xiaohulu]

先使用 element-plus，然后再使用 naive，在使用者的角度，基于slot的方案更直观

[hecktlaspha]

这个设计还不错吧, element的slots方案写到最后一般会演变成创造一套工厂函数来v-for创建el-table-column, 和现在的方案也没差多少,毕竟一个表格列就要写一段template属实有点精神污染.至于现在的方案, 把所有的render-xxx用TSX写就可以极大地降低代码量了.
不过h函数和TSX的门槛相对比较高, 新手估计不太能正常写.

[KeterVM]

认同+1
通常在做中后台项目的时候都会写再次封装，通过一个schema去遍历生成CRUD所需的Form和Table。
遇到需要自定义渲染的情况Render和TSX基本能解决大部分的问题。
如果真的不能满足需求应该考虑使用社群中一些更强大、更复杂的库去解决， 比如vxe-table and etc...