Skip to content
element-ui 的代码可视化编辑
Vue JavaScript CSS Other
Branch: master
Clone or download
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
public feat: complate the vue template Apr 25, 2019
src feat[form]: add delete feat Aug 9, 2019
.eslintrc.js fix[no-use-v-if-with-v-for] Jul 19, 2019
.gitignore init Apr 21, 2019
.travis.yml feat: ci Apr 22, 2019
CONTRIBUTING.md Create CONTRIBUTING.md Jul 18, 2019
LICENSE docs: readme package.json Jul 18, 2019
README.md fix: ci Jul 18, 2019
babel.config.js init Apr 21, 2019
deploy.sh fix: ci Apr 22, 2019
desktop.ini feat( right panel): add two btn May 16, 2019
package-lock.json todo[options] Jul 22, 2019
package.json todo[options] Jul 22, 2019
prettier.config.js feat[snippet]: add type snippet May 29, 2019
vue.config.js fix: ci Jul 18, 2019
yarn.lock Feat/tableCodeGen@lgq (#4) Jul 18, 2019

README.md

Welcome to vue-element-nocode-admin 👋

Version License: MIT travis ci

element-ui 的代码可视化编辑器,自动生成表单代码,列表代码。不是一个可视化解决方案,更像是生成模板的工具

🏠 Homepage

Install

npm install

How to Use

表单

一份表单有两个需要编辑的地方,一个是表单本身的属性,比如表单对象,表单的 Ref(用于表单验证),另一个就是表单包含的表单元素。

表单属性在表单属性编辑区可以编辑,表单元素的生成有两种方式

  • 拖拽

将表单元素拖拽到拖拽区,然后编辑表单元素属性

  • 支持 JSON 转化为表单

作为一个表单编辑工具,拖拽虽然简单,但是表单数量多的时候还是很麻烦。

因为我司接口通过 swagger 管理,其 post 接口列出了数据,如下图

swagger图

你可以很方便的把数据粘贴至 JSON 表单对象的输入框,支持嵌套的对象。

表单编辑区

但是粘贴过来的数据仅有 value 值,因此我定义了value:label 这样的结构,value 作为表单的 value,label 作为表单的 label。注意 label 需要用引号引起来。

{
  "id": 'ID',
  "title": '标题',
  "type": '类型'
}

然后点击生成表单即可,默认生成 Input,可在表单元素编辑区修改

表格

将后端返回得数据粘贴到生成表单得输入框中,生成表单,然后编辑表格头即可,后续会加上表格查询

Author

👤 sarva

Show your support

Give a ⭐️ if this project helped you!

You can’t perform that action at this time.