---

X Naive UI

一个对 Naive-UI 组件库的扩展。

使 DataTable / Dropdown / Select / Menu 等组件支持插槽式的写法。

English | 中文

---

简介

Naive-UI 是一个流行的 Vue 3 组件库。

官方团队出于可维护性的考虑，没有提供 DataTable、Dropdown、Select、Menu 等组件的插槽或 template 式的写法支持。

以下是 GitHub 上的一些相关 Issues：

• #205: 增加数据表格展开功能的插槽
• #216: table 使用 template 风格的 API
• #307: NDataTable 和 NTree 组件能够支持使用插槽渲染吗？
• #520: NDropdown support template option
• #1136: 你认同 DataTable 的设计方案么？
• #2054: 是否考虑将组件中的 h 函数调整为 template 插槽
• #2252: 建议 DataTable 组件支持自定义列模板
• #3337: 使用 h 渲染函数的建议
• #4273: DataTable 增加 template 支持
• #4663: 希望 Dropdown 可以增加 slots 插槽
• #5065: n-data-table slot for row or component for column
• #5134: datatable 请求提供对外的列插槽，或者 render 提供 jsx 的形式，不必使用 h 函数

本项目旨在为上述问题提供解决方案。

---

特性

• DataTable：提供了列头、单元格、展开行的插槽写法支持。
• Dropdown：提供了下拉菜单项的插槽写法支持。
• Select：提供了选项、选项组的插槽写法支持。

---

快速开始

1. 安装依赖

使用 npm 或其他包管理工具安装依赖：

> npm install @skit/x.naive-ui

2. 组件注册

如果使用 Vue 默认的模板语法，需要注册组件后方可使用，有如下三种方式注册组件：

2.1. 全局完整注册

import { createApp } from 'vue';
import XNaiveUI from '@skit/naive-ui';

const app = createApp(App);
app.use(XNaiveUI);

2.2. 全局部分注册

import { createApp } from 'vue';
import { DataTable, Dropdown } from '@skit/naive-ui';

const app = createApp(App);
app.use(DataTable);
app.use(Dropdown);

2.3. 局部注册

<template>
    <x-n-data-table :columns="columns" :data="data" />
</template>

<script>
    import { DataTable } from '@skit/naive-ui';

    export default {
        components: {
            XNDataTable: DataTable
        }
    };
</script>

3. 使用组件

请参阅《开发文档》。

4. 示例项目

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

> pnpm install
> pnpm run build
> pnpm run demo

---

迭代计划

• DataTable: Slot 插槽
• DataTable: Template 模板式 API
• Dropdown: Slot 插槽
• Dropdown: 多级菜单
• Menu: Slot 插槽
• Select: Slot 插槽
• Tree: Slot 插槽
• TreeSelect: Slot 插槽