https://github.com/gameorstudy/element-ui-pro-components
vue 2 + Element UI 高级组件库：ProTable 查询表格、ProForm 高级表单、DialogForm 弹框表单、EditableProTable 可编辑表格
https://github.com/gameorstudy/element-ui-pro-components
dialog-form editable-pro-table element element-ui element-ui-pro-components pro-form pro-table vue2
Last synced: 14 days ago
JSON representation
vue 2 + Element UI 高级组件库：ProTable 查询表格、ProForm 高级表单、DialogForm 弹框表单、EditableProTable 可编辑表格
- Host: GitHub
- URL: https://github.com/gameorstudy/element-ui-pro-components
- Owner: gameorstudy
- License: mit
- Created: 2026-04-05T06:43:37.000Z (4 months ago)
- Default Branch: main
- Last Pushed: 2026-06-14T03:14:23.000Z (about 1 month ago)
- Last Synced: 2026-06-14T05:08:15.344Z (about 1 month ago)
- Topics: dialog-form, editable-pro-table, element, element-ui, element-ui-pro-components, pro-form, pro-table, vue2
- Language: Vue
- Homepage: https://gameorstudy.github.io/element-ui-pro-components
- Size: 1.56 MB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
### 快速开始
### Element UI Pro Components
本项目是受 Ant Design Pro Components 的启发，旨在为 Vue 2 + Element UI 生态提供更高级别的模板组件，方便表单、表格功能开发。
#### 架构与组件总览
ProComponents 提供了一系列高级组件，覆盖了从布局到表单、表格的核心场景：
* **ProForm** - 高级表单
* **DialogForm** - 弹框表单
* **ProTable** - 查询表格
* **EditableProTable** - 可编辑表格
#### 前置条件
本组件库依赖以下库，请确保你的项目中已安装：
```json
{
"el-table-prepend": "^1.3.2",
"element-ui": "^2.15.14",
"vue": "^2.6.10",
"vue-fragment": "^1.6.0"
}
```
#### 安装
安装 element-ui-pro-components 库：
```bash
npm install element-ui-pro-components
```
#### 完整引入
在 main.js 中写入以下内容：
```js
import Vue from 'vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import Fragment from 'vue-fragment'
import ElementUIProComponents from 'element-ui-pro-components'
import 'element-ui-pro-components/lib/index.css'
Vue.use(Fragment.Plugin)
Vue.use(ElementUI)
Vue.use(ElementUIProComponents)
```
#### 按需引入
借助 babel-plugin-component，我们可以只引入需要的组件，以达到减小项目体积的目的。
首先，安装 babel-plugin-component：
```bash
npm install babel-plugin-component -D
```
然后，将 babel.config.js 修改为：
```js
module.exports = {
"plugins": [
[
"component",
{
"libraryName": "element-ui-pro-components",
"style": true
},
'element-ui-pro-components'
]
]
}
```
#### 效果
```js
import { ProTable } from 'element-ui-pro-components'
↓ ↓ ↓ ↓ ↓ ↓
var ProTable = require('components/lib/pro-table')
require('components/lib/pro-table/style.css')
```
接下来，如果你只希望引入部分组件，比如 ProForm 和 ProTable，那么需要在 main.js 中写入以下内容：
```js
import Vue from 'vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import Fragment from 'vue-fragment'
import { ProForm, EditableProTable } from 'element-ui-pro-components'
Vue.use(Fragment.Plugin)
Vue.use(ElementUI)
Vue.use(ProForm)
Vue.use(EditableProTable)
```
#### 链接
| | 文档 | GitHub |
| --- | --- | --- |
| **Vue 2 + Element UI（本项目）** | [在线文档](https://gameorstudy.github.io/element-ui-pro-components/) | [element-ui-pro-components](https://github.com/gameorstudy/element-ui-pro-components) |
| **Vue 3 + Element Plus** | [在线文档](https://gameorstudy.github.io/element-plus-pro-components/) | [element-plus-pro-components](https://github.com/gameorstudy/element-plus-pro-components) |
> 如果你正在使用 Vue 3，推荐迁移到 [Element Plus Pro Components](https://gameorstudy.github.io/element-plus-pro-components/)。
#### 注意
`el-table-prepend` 是在 `element-ui` 的 `table` 源码上添加了一个 `slot`，没有打包 `element-ui`，因此不支持 umd 打包。因此 `element-ui-pro-components` 也不支持 `umd` 打包。