一个对 Naive-UI 组件库的扩展。
使 DataTable / Dropdown / Menu / Select / Tree 等组件支持插槽模板式的写法。
简体中文 | English
Naive-UI 是一个流行的 Vue 3 组件库。
官方团队出于可维护性的考虑，没有提供 DataTable、Dropdown、Menu、Select、Cascader、Tree、TreeSelect 等组件的 Slot 插槽或 Template 模板式的写法支持。
以下是 GitHub 上的一些相关 Issues：
- #106 - Table support slot for customColumn
- #205 - 增加数据表格展开功能的插槽
- #216 - table 使用 template 风格的 API
- #307 - NDataTable 和 NTree 组件能够支持使用插槽渲染吗？
- #520 - NDropdown support template option
- #1136 - 你认同 DataTable 的设计方案么？
- #2054 - 是否考虑将组件中的 h 函数调整为 template 插槽
- #2252 - 建议 DataTable 组件支持自定义列模板
- #3337 - 使用 h 渲染函数的建议
- #3363 - 所有组件的 render 函数都删掉吧
- #3477 - 建议添加一个组件：菜单项
- #4273 - DataTable 增加 template 支持
- #4663 - 希望 Dropdown 可以增加 slots 插槽
- #5065 - n-data-table slot for row or component for column
- #5134 - datatable 请求提供对外的列插槽，或者 render 提供 jsx 的形式，不必使用 h 函数
本项目旨在为上述问题提供解决方案。
🚀 已加入 Awesome Naive-UI 系列。
- 与 Naive-UI 组件几乎完全一致的 API（最新适配版本：
v2.40.1）。只需在原来的组件名前增加x-前缀（例如：<n-data-table>→<x-n-data-table>）。 - 配合 vue-tsc，在模板中使用插槽也可享受到 TypeScript 的类型约束。
DataTable：提供了列头、单元格、展开行的作用域插槽写法支持。DataTable：提供了列、总结栏的模板写法支持（即在模板中定义columns、summaryprop）。Dropdown：提供了菜单项、图标的作用域插槽写法支持。Dropdown：提供了菜单项、菜单分组的模板写法支持（即在模板中定义optionsprop）。Menu：提供了菜单项的模板写法支持（即在模板中定义optionsprop）。Menu：提供了菜单项、图标的作用域插槽写法支持。Select：提供了选项、选项组的模板写法支持（即在模板中定义optionsprop）。Select：提供了选项、标签的作用域插槽写法支持。Popselect：提供了选项、选项组的模板写法支持（即在模板中定义optionsprop）。Popselect：提供了选项的作用域插槽写法支持。Cascader：提供了选项的作用域插槽写法支持。Tree：提供了数据项、开关图标的作用域插槽写法支持。TreeSelect：提供了数据项、标签、开关图标的作用域插槽写法支持。Button：提供了当仅有图标时显示为正方形的样式效果。
点此查看。
你可以运行 Demo 来查看更多内容。
> pnpm install # 安装依赖
> pnpm run build # 构建项目
> pnpm run demo # 运行示例，访问 http://localhost:8888/