# Element-plus 二次封装

**Repository Path**: DcdSyc/element-plus-extend

## Basic Information

- **Project Name**: Element-plus 二次封装
- **Description**: Element-plus 的二次封装
- **Primary Language**: HTML
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 5
- **Forks**: 0
- **Created**: 2025-10-21
- **Last Updated**: 2025-10-27

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Element Plus Extend

Element Plus Extend 是一个基于 [Element Plus](https://element-plus.org/) 的扩展组件库，提供了更多高级和实用的组件，帮助开发者快速构建现代化的 Vue 3 应用程序。

## 项目概述

该项目展示了多种扩展的 Element Plus 组件，包括动态表单、分页表格、上下文菜单等，旨在提高开发效率并增强用户体验。这些组件封装了常见的业务场景需求，例如条件显示表单字段、异步数据加载、动态选项等，使开发者能够更轻松地构建复杂的交互界面。

项目采用 Vue 3 Composition API 和 TypeScript 编写，充分利用了现代前端技术的优势，保证了代码的类型安全和可维护性。

## 主要功能组件

### 1. DynamicForm 动态表单
基于 Element Plus 的表单组件封装，支持：
- 动态字段渲染
- 条件显示/隐藏字段
- 异步选项加载
- 表单验证
- 响应式表单控制
- VNode 缓存优化性能
- 复杂表单联动逻辑处理

### 2. PaginatedTable 分页表格
带有分页功能的表格组件，特性包括：
- 自动分页处理
- 数据过滤
- 自定义列渲染

### 3. ContextMenu 上下文菜单
右键菜单组件，支持：
- 图标显示
- 菜单项禁用
- 分隔线
- 快捷回调处理

### 4. FunctionalDialog 函数式对话框
通过函数调用方式打开的对话框组件，特点：
- 支持任意内容
- 灵活的配置选项
- 异步提交处理

### 5. NavigationMenu 导航菜单
可折叠的侧边栏导航菜单组件

### 6. DelConfirmDialog 删除确认对话框
专门用于删除确认场景的对话框组件

## 更多二次封装组件持续更新中...

## 动态表示例

项目中的 [App.vue](src/App.vue) 文件包含了动态表单的各种使用示例，展示了所有核心特性：

### 表单特性演示

1. **基础表单字段**：姓名（输入框）、个人主页（带前置插槽的输入框）
2. **栅格布局**：年龄和性别字段各占一半宽度
3. **条件显示**：
   - 性别字段在年龄未填写或小于18岁时禁用
   - 爱好字段在学历选择为小学及以上时显示
   - 武器选择字段在爱好包含"打豆豆"时显示
4. **动态选项**：
   - 学历选项根据年龄动态变化
   - 武器选项根据爱好组合异步加载
5. **表单验证**：姓名、个人主页和性别字段为必填项
6. **函数式对话框**：支持以模态框形式展示表单

### 表单数据联动逻辑

```typescript
const formData = reactive({
  name: "张三",
  home: "",
  age: undefined as number | undefined,
  sex: undefined as number | undefined,
  hobby: [] as number[],
  education: undefined as number | undefined,
  way: undefined as number | undefined,
});
```

### 核心特性代码示例

1. **条件显示字段**：
```typescript
{
  ...itemType(ElCheckboxGroup),
  key: "hobby",
  label: "爱好",
  show: (data) => (data.education ? (data.education as number) >= 2 : false),
  options: [
    { label: "吃饭", value: 1 },
    { label: "睡觉", value: 2 },
    { label: "打豆豆", value: 3 },
    { label: "角色扮演", value: 4 },
  ],
}
```

2. **动态选项**：
```typescript
{
  ...itemType(ElRadioGroup),
  key: "education",
  label: "学历",
  options: (data) => {
    if (!data.age || data.age <= 6) {
      return [{ label: "幼儿园", value: 1 }];
    } else if (data?.age > 6 && data?.age <= 12) {
      return [
        { label: "幼儿园", value: 1 },
        { label: "小学", value: 2 },
        { label: "初中", value: 3 },
      ];
    } else {
      return [
        { label: "幼儿园", value: 1 },
        { label: "小学", value: 2 },
        { label: "初中", value: 3 },
        { label: "高中", value: 4 },
        { label: "大专", value: 5 },
        { label: "本科", value: 6 },
      ];
    }
  },
}
```

3. **异步选项加载**：
```typescript
{
  ...itemType(ElSelect, { placeholder: "请选择你使用的武器" }),
  key: "way",
  label: "用什么武器",
  show: (data) => (data.hobby ? data.hobby.includes(3) : false),
  options: (data) => {
    if (data.hobby.includes(3) && !data.hobby.includes(4)) {
      return {
        getOptions: () => {
          return new Promise((resolve) => {
            setTimeout(() => {
              resolve([
                { label: "剑", value: 1 },
                { label: "枪", value: 2 },
                { label: "斧", value: 3 },
              ]);
            }, 1600);
          });
        },
        key: "way1",
      };
    } else if (data.hobby.includes(3) && data.hobby.includes(4)) {
      return {
        getOptions: () => {
          return new Promise((resolve) => {
            setTimeout(() => {
              resolve([
                { label: "剑", value: 1 },
                { label: "枪", value: 2 },
                { label: "斧", value: 3 },
                { label: "步枪", value: 4 },
                { label: "手枪", value: 5 },
                { label: "匕首", value: 6 },
                { label: "火箭筒", value: 7 },
              ]);
            }, 1600);
          });
        },
        key: "way2",
      };
    } else {
      return {
        getOptions: () => {
          return new Promise((resolve) => {
            resolve([]);
          });
        },
        key: "null",
      };
    }
  },
}
```

## 获取和使用

由于项目尚未发布到 npm，您需要通过克隆仓库的方式获取和使用：

```bash
git clone https://gitee.com/DcdSyc/element-plus-extend.git
cd element-plus-extend
```

### 环境要求
- Node.js >= 16.x
- pnpm >= 8.x

### 安装依赖
```bash
pnpm install
```

### 启动开发服务器
```bash
pnpm dev
```

### 构建生产版本
```bash
pnpm build
```

## 项目结构

```
src/
├── assets/                 # 静态资源文件
├── components/             # 组件目录
│   └── ElementPlusExtension/  # Element Plus 扩展组件
│       ├── ContextMenu/       # 上下文菜单组件
│       ├── DelConfirmDialog/  # 删除确认对话框
│       ├── DynamicForm/       # 动态表单组件
│       ├── DynamicTabs/       # 动态标签页组件
│       ├── FunctionalDialog/  # 函数式对话框
│       ├── Helper/            # 辅助工具
│       ├── NavigationMenu/    # 导航菜单组件
│       └── PaginatedTable/    # 分页表格组件
└── App.vue                 # 主应用入口
```

## 技术栈

- Vue 3 (Composition API)
- TypeScript
- Element Plus
- Vite
- nanoid (唯一ID生成)

## 许可证

请查看项目中的 LICENSE 文件了解详细信息.