Element UI Pro Components

# 快速开始

# Element UI Pro Components

本项目是受 Ant Design Pro Components 的启发，旨在为 Vue 2 + Element UI 生态提供更高级别的模板组件，方便表单、表格功能开发。

# 架构与组件总览

ProComponents 提供了一系列高级组件，覆盖了从布局到表单、表格的核心场景：

  • ProForm - 高级表单
  • DialogForm - 弹框表单
  • ProTable - 查询表格
  • EditableProTable - 可编辑表格

# 前置条件

本组件库依赖以下库，请确保你的项目中已安装：

{
  "el-table-prepend": "^1.3.2",
  "element-ui": "^2.15.14",
  "vue": "^2.6.10",
  "vue-fragment": "^1.6.0"
}
1
2
3
4
5
6

# 安装

安装 element-ui-pro-components 库：

npm install element-ui-pro-components
1

# 完整引入

在 main.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)
1
2
3
4
5
6
7
8
9
10

# 按需引入

借助 babel-plugin-component，我们可以只引入需要的组件，以达到减小项目体积的目的。

首先，安装 babel-plugin-component：

npm install babel-plugin-component -D
1

然后，将 babel.config.js 修改为：

module.exports = {
  "plugins": [
    [
      "component",
      {
        "libraryName": "element-ui-pro-components",
        "style": true
      },
      'element-ui-pro-components'
    ]
  ]
}
1
2
3
4
5
6
7
8
9
10
11
12

# 效果

import { ProTable } from 'element-ui-pro-components'
↓ ↓ ↓ ↓ ↓ ↓
var ProTable = require('components/lib/pro-table')
require('components/lib/pro-table/style.css')
1
2
3
4

接下来，如果你只希望引入部分组件，比如 ProForm 和 ProTable，那么需要在 main.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)
1
2
3
4
5
6
7
8
9
10

# 注意

el-table-prepend 是在 element-ui 的 table 源码上添加了一个 slot，没有打包 element-ui，因此不支持 umd 打包。因此 element-ui-pro-components 也不支持 umd 打包。

国际化 →