Skip to content

组件总览

Pro El Components 提供了丰富的业务组件,帮助您快速构建企业级中台应用。所有组件都基于 Element Plus 设计,保持一致的用户体验。

设计原则

  • 兼容性优先 - 完全兼容 Element Plus 的所有原始用法,支持渐进式升级
  • 业务导向 - 专注解决中台系统常见业务场景
  • 灵活可扩展 - 支持自定义配置,满足不同业务需求
  • 开箱即用 - 提供合理的默认配置,降低使用门槛

📦 组件分类

数据展示

高效展示各种数据格式,提供丰富的交互功能。

组件描述特性
ProTable高级表格组件自动分页、列配置、数据格式化、操作列
StatusText状态文本显示多种状态样式、自定义颜色、图标支持
TextSummary文本摘要组件展开收起、字数限制、优雅截断

数据录入

快速构建各种表单,提升数据录入效率。

组件描述特性
FormFields表单项生成器配置化生成、多种布局、联动支持
Field统一表单字段多种输入类型、验证规则、格式化
SearchForm搜索表单组件快速筛选、重置功能、响应式布局
RemoteSelect远程选择器异步加载、搜索过滤、无限滚动
Cascader级联选择器多级联动、异步加载、自定义显示
Select增强选择器多选支持、搜索功能、自定义选项

反馈组件

提供用户操作反馈,提升交互体验。

组件描述特性
Dialog增强对话框拖拽支持、全屏模式、嵌套处理
ModalForm弹窗表单表单验证、提交处理、加载状态
ModalDetail弹窗详情数据展示、打印功能、操作按钮

导航组件

帮助用户快速定位和操作。

组件描述特性
ButtonActions操作按钮组权限控制、批量操作、响应式隐藏
SectionHeader章节标题分割线样式、图标支持、操作区域
TableSelector表格选择器弹窗选择、多选支持、搜索过滤

布局组件

提供标准化的页面布局结构。

组件描述特性
PageContainer页面容器面包屑、标题栏、内容区域
PageHeader页面头部返回按钮、标题描述、操作区域
ListPage列表页容器搜索区域、表格区域、分页组件

工具组件

提供常用的工具功能。

组件描述特性
Clipboard剪贴板操作一键复制、成功提示、兼容性处理
SubmitTextarea提交文本框快捷键提交、字数统计、自动扩展

快速开始

全量引入

javascript
import ProElComponents from 'pro-el-components'
import { createApp } from 'vue'
import 'pro-el-components/dist/style.css'

const app = createApp(App)
app.use(ProElComponents)

按需引入

javascript
import { ProFormFields, ProTable } from 'pro-el-components'

// 在组件中使用
export default {
  components: {
    ProTable,
    ProFormFields
  }
}

💡 最佳实践

  1. 组件组合 - 多个组件可以自由组合使用,构建复杂的业务场景
  2. 渐进升级 - 可以逐步替换现有的 Element Plus 组件
  3. 自定义扩展 - 通过插槽和事件机制灵活扩展功能
  4. 类型安全 - 充分利用 TypeScript 类型定义,提升开发效率