Skip to content

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

@Char-Ten

Description

@Char-Ten

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的理念

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions