Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

NDataTable和NTree组件能够支持使用插槽渲染吗? #307

Closed
Char-Ten opened this issue Jun 27, 2021 · 12 comments
Closed

NDataTable和NTree组件能够支持使用插槽渲染吗? #307

Char-Ten opened this issue Jun 27, 2021 · 12 comments

Comments

@Char-Ten
Copy link
Contributor

Char-Ten commented Jun 27, 2021

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

数据归数据,UI归UI。目前数据表和树组件的自定义结构渲染是采用js而非vue模板去去描述的,而希望可以使用slot插槽渲染的考虑有三点:
1,采用jsx或者js函数渲染对一些vue使用者来说有一定的难度;
2,如果不是对vue3的文档啃得特别熟的话,应该不知道如何在setup函数里面如何访问methods里的方法(getCurrentInstance);
3,减少数据转换难度

Expected API (期望的 API)

类似这个:

<n-data-table :columns="columns" :data="tableData">
    <template #column-operate="{ row, col }">
      <b-button @click="onDelete(row, col)">删除</b-button>
    </template>
 </n-data-table>

columns里面有个key为"operate"的列,然后可以通过v-slot:column-operate的方式把ui渲染上去。或者用component的is属性在表格里分发不同的组件(在树组件此需求应该会有的)。

目前我试着改了一下n-data-table,可以实现,把slot传进那个cell组件内渲染,不过不清楚会不会导致其他问题,且也不清楚这个feature符不符合native ui的理念

@07akioni
Copy link
Collaborator

07akioni commented Jun 27, 2021

在 js 层面这么做没问题,但是在 ts 层面这样不会存在任何类型检查,目前 vue 的 slot 没有类型。另外维护成本比较高,我们暂时不打算提供类似的 api。naive-ui 提供的 slot 以简单渲染任务为主,例如 header。

@Char-Ten
Copy link
Contributor Author

目前vue这块,提供的类型是{[x:string]?:Slot},本身也是不确定的,因为用户可传可不传嘛,所以还是要加一次类型判断后使用。
image
那如果说,不加这个key,单纯是一个v-slot:cell渲染呢?
image

我个人感觉,现在这种js配置的方式去自定义渲染表格内容或者树节点,用vue2合适,用vue3不合适。。。毕竟Vue3搞组合式API,最大的目的是希望数据和界面解耦嘛,那我自然是希望数据的内容,一个useXX函数,返回值里面除了数据,最多就是对数据的增删改查方法,不希望跟页面具体UI交互有关联。但现在使用naiveUI,我不得不在useXX里面关联大量的页面交互。。。

@07akioni
Copy link
Collaborator

07akioni commented Jun 27, 2021

正是因为类型不确定所以才不是很想搞,如果我们依赖于还没有确定的 API 去吧这个事情做了,如果某天 slot 有了类型就有会出现很多 breaking changes。

关于你说的事情我认为也是有道理的,只是相比于这个功能,我们觉得别的事情更重要、风险更小一些,毕竟开发资源还是很有限的。如果我们的开发资源很多,我们可能选择两种 API 都要,因为本质就是换个写法;如果我们的开发资源有限,我们倾向于选择可维护性更好、更加类型严谨的。

@Char-Ten
Copy link
Contributor Author

那我这周末试试提个pr?你们看看可不可以?

@07akioni
Copy link
Collaborator

那我这周末试试提个pr?你们看看可不可以?

不用了,感谢,暂时不打算加。🙏

@Char-Ten
Copy link
Contributor Author

好吧。。。。table的还好。。。不过tree组件的话,现在是连一个自定义渲染节点的方式都不提供?QAQ

@07akioni
Copy link
Collaborator

好吧。。。。table的还好。。。不过tree组件的话,现在是连一个自定义渲染节点的方式都不提供?QAQ

要提供的,这个正在制作中

@nameJw
Copy link

nameJw commented May 19, 2022

所以能在 NDataTable 表格里面只能是一些简单的内容吗,如果要放图片和文字这种就不行了吗?

@nameJw
Copy link

nameJw commented May 19, 2022

真心觉得在 NDataTable 的 columns 中的render 里面去 用 h() 生成 是一件很麻烦的事

@Mrcxt
Copy link

Mrcxt commented Oct 8, 2022

真心觉得在 NDataTable 的 columns 中的render 里面去 用 h() 生成 是一件很麻烦的事

同感,期望能加上插槽

@dodu2014
Copy link

期待能支持 slot 渲染

@fudiwei
Copy link

fudiwei commented Aug 21, 2023

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

6 participants