/Element-Pro-Crud

🚀二次封装Table,Form组件,配套表单,表格设计器,一键Crud🚀

Primary LanguageVueGNU Lesser General Public License v3.0LGPL-3.0

🎉 ElementProCrud 🎉

ElementProCrud 快速搭建 CRUD 的利器

NPM Version NPM Downloads

Documentation

文档地址

Demo

在线 demo

表单设计器

集成示例demo

Install

NPM

npm i element-pro-crud -s

引入方式

import Vue from 'vue';
import ElementProCrud from 'element-pro-crud'
import ElementUI from 'element-ui'
import 'element-pro-crud/lib/ProCrud.css'
import 'element-ui/lib/theme-chalk/index.css'

Vue.use(ElementUI)
Vue.use(ElementProCrud)

CDN

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <!-- 引入ProCrud CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/element-pro-crud/lib/ProCrud.css" />
    <!-- 引入ElementUI CSS -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"
    />
  </head>
  <body>
    <div id="app">
      <form-designer ref="form"></form-designer>
      <table-designer ref="table"></table-designer>
    </div>
  </body>
  <!-- import Vue before Element -->
  <script src="https://unpkg.com/vue/dist/vue.js"></script>
  <!-- import ElementUI -->
  <script src="https://unpkg.com/element-ui/lib/index.js"></script>
  <!-- import ElementProCrud -->
  <script src="https://cdn.jsdelivr.net/npm/element-pro-crud@latest/lib/ProCrud.umd.js"></script>
  
  <script>
    new Vue({
      el: "#app"
    });
  </script>
</html>

组件列表

  • ProForm 根据表单设计器 json 自动渲染表单

  • ProTable 二次封装 el-table

  • CrudTable 高级增删改查 CrudTable

  • FormDesigner 表单设计器

  • TableDesigner 表格设计器

License

MIT

Copyright (c) 2020-present, BoBoooooo