X Naive-UI

一个对 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.38.2）。只需在原来的组件名前增加 x- 前缀（例如：<n-data-table> → <x-n-data-table>）。
• 配合 vue-tsc，在模板中使用插槽也可享受到 TypeScript 的类型约束。
• DataTable：提供了列头、单元格、展开行的作用域插槽写法支持。
• DataTable：提供了列、总结栏的模板写法支持（即在模板中定义 columns、summary prop）。
• Dropdown：提供了菜单项、图标的作用域插槽写法支持。
• Dropdown：提供了菜单项、菜单分组的模板写法支持（即在模板中定义 options prop）。
• Menu：提供了菜单项的模板写法支持（即在模板中定义 options prop）。
• Menu：提供了菜单项、图标的作用域插槽写法支持。
• Select：提供了选项、选项组的模板写法支持（即在模板中定义 options prop）。
• Select：提供了选项、标签的作用域插槽写法支持。
• Popselect：提供了选项、选项组的模板写法支持（即在模板中定义 options prop）。
• Popselect：提供了选项的作用域插槽写法支持。
• Cascader：提供了选项的作用域插槽写法支持。
• Tree：提供了数据项、开关图标的作用域插槽写法支持。
• TreeSelect：提供了数据项、标签、开关图标的作用域插槽写法支持。

---

使用手册

点此查看。

---

示例项目

你可以运行 Demo 来查看更多内容。

> pnpm install    # 安装依赖
> pnpm run build  # 构建项目
> pnpm run demo   # 运行示例，访问 http://localhost:8888/