el-form-design

一个基于element ui的可拖拽生成表单的表单设计器 先看Demo Demo源码

有任何意见建议或者问题请在我 博客 下留言 或者提 issues 我将尽最大努力解决

使用方法

# 1.安装 
npm install el-form-design
# or
yarn install el-form-design

# 2. 导入 

import elformdesign from 'el-form-design'
# 因为是基于 element ui 的 所以可能需要用户提前安装 element ui 并全部导入
Vue.use(ElementUI);
Vue.use(elformdesign);

# 3 使用 
# 直接在页面中 使用 <formdesign/> 标签 即可展示出 表单编辑页面
<formdesign/>

示列代码 (表单设计页面)

<template>
  <div>
    # fields 预设的 可以在设计时选择的字段
    # formdata 设计好的表单json数据 (用于接着以前未设计完成的时表单接着设计)
    # save方法为触发保存的回调  返回的是设计好的表单的json 数据 
    <formdesign :fields='fields'  @save='saveform'/>
  </div>
</template>

<script>
export default {
  data () {
    return {
        fields:[
          {label: '姓名', value: 'name'},
          {label: '年龄', value: 'age'},
        ]
    }
  },
  methods: {
    saveform (data) {
      console.log(data)
    }
  }
};
</script>

示列代码 (表单展示页面)

<template>
  <div class="cont">
    # 输入的 data 为表单设计页面设计好的表单数据
    # save方法为用户点击提交按钮的回调
    # defaultData 预设的 表单数据 (用于表单回显 或 设置默认值)
    <showforms :data="data" :defaultData='defaultData' @save='save' />
  </div>
</template>

<script>
export default {
  name: 'app',
  components: {
  },
  created(){
  },
  data () {
    return {
      defaultData: {
        name:1,
        age:2
      },
      data:{"formsetting":{"labelPosition":"left","labelwidth":80,"formsize":"small"},"forms":[{"id":"Input1584811420088","type":"Input","name":"文本框","col":24,"key":"Input1584811420088","showFrom":["name","col","key","minlength","maxlength","showwordlimit","placeholder","clearable","showpassword","disabled","prefixicon","suffixicon","prepend","append"],"minlength":0,"maxlength":100,"showwordlimit":true,"placeholder":"请输入文本框","clearable":true,"showpassword":false,"disabled":false,"prefixicon":"el-icon-edit","suffixicon":"","prepend":"","append":"","rules":[{"required":false,"message":"请输入文本框","trigger":"change"}]},{"id":"Select1584811421108","type":"Select","name":"下拉框","col":24,"key":"Select1584811421108","showFrom":["name","col","key","multiple","collapsetags","placeholder","clearable","disabled","filterable","allowcreate","datatype","option","url"],"multiple":false,"collapsetags":false,"disabled":false,"filterable":false,"allowcreate":false,"placeholder":"请输入下拉框","clearable":true,"datatype":"option","url":"","option":[{"value":"Beijing","label":"北京"},{"value":"Shanghai","label":"上海"},{"value":"Tianjin","label":"天津"},{"value":"ChongQing","label":"重庆"}],"rules":[{"required":false,"message":"请输入下拉框","trigger":"change"}]},{"id":"Textarea1584811420385","type":"Textarea","name":"文本域","col":24,"key":"Textarea1584811420385","showFrom":["name","col","key","rows","minlength","maxlength","showwordlimit","placeholder","clearable","disabled"],"rows":1,"minlength":0,"maxlength":100,"showwordlimit":true,"placeholder":"请输入文本域","clearable":true,"disabled":false,"rules":[{"required":false,"message":"请输入文本域","trigger":"change"}]},{"id":"InputNumber1584811420795","type":"InputNumber","name":"计数器","col":24,"key":"InputNumber1584811420795","showFrom":["name","col","key","min","max","step","stepstrictly","precision","disabled","controlsposition","placeholder"],"min":0,"max":10000,"step":1,"stepstrictly":false,"precision":1,"disabled":false,"controlsposition":"right","placeholder":"请输入计数器","rules":[{"required":false,"message":"请输入计数器","trigger":"change"}]},{"id":"Checkbox1584811424408","type":"Checkbox","name":"多选","col":24,"key":"Checkbox1584811424408","showFrom":["name","col","key","disabled","checkboxtype","datatype","option","url","min","max"],"checkboxtype":"fang","disabled":false,"min":0,"max":2,"datatype":"option","url":"","option":[{"value":"Beijing","label":"北京"},{"value":"Shanghai","label":"上海"},{"value":"Tianjin","label":"天津"},{"value":"ChongQing","label":"重庆"}],"rules":[{"required":false,"message":"请输入多选","trigger":"change"}]},{"id":"Switch1584811421758","type":"Switch","name":"开关","col":24,"key":"Switch1584811421758","showFrom":["name","col","key","disabled","activetext","inactivetext","activecolor","inactivecolor"],"disabled":false,"activetext":"开","inactivetext":"关","activecolor":"#409EFF","inactivecolor":"#C0CCDA","rules":[{"required":false,"message":"请输入开关","trigger":"change"}]},{"id":"Slider1584811422063","type":"Slider","name":"滑块","col":24,"key":"Slider1584811422063","showFrom":["name","col","key","min","max","disabled","step","showstops","showinput","range"],"min":0,"max":100,"disabled":false,"step":1,"showstops":false,"showinput":false,"range":false,"rules":[{"required":false,"message":"请输入滑块","trigger":"change"}]},{"id":"Timeselect1584811422665","type":"Timeselect","name":"固定时间","col":24,"key":"Timeselect1584811422665","showFrom":["name","col","key","disabled","placeholder","pickeroptions","clearable","prefixicon"],"disabled":false,"placeholder":"请输入固定时间","clearable":false,"prefixicon":"el-icon-time","pickeroptions":{"start":"09:00","end":"18:00","step":"00:15"},"rules":[{"required":false,"message":"请输入固定时间","trigger":"change"}]},{"id":"Timepicker1584811423017","type":"Timepicker","name":"任意时间","col":24,"key":"Timepicker1584811423017","showFrom":["name","col","key","disabled","placeholder","clearable","prefixicon","isrange","startplaceholder","endplaceholder","rangeseparator"],"disabled":false,"placeholder":"请输入任意时间","clearable":false,"prefixicon":"el-icon-time","isrange":false,"startplaceholder":"开始时间","endplaceholder":"结束时间","rangeseparator":"至","rules":[{"required":false,"message":"请输入任意时间","trigger":"change"}]},{"id":"DatePicker1584811423587","type":"DatePicker","name":"日期","col":24,"key":"DatePicker1584811423587","showFrom":["name","col","key","disabled","placeholder","clearable","prefixicon","datetype","startplaceholder","endplaceholder","rangeseparator"],"placeholder":"请输入日期","clearable":false,"disabled":false,"prefixicon":"el-icon-time","datetype":"date","startplaceholder":"开始时间","endplaceholder":"结束时间","rangeseparator":"至","rules":[{"required":false,"message":"请输入日期","trigger":"change"}]},{"id":"Radio1584811423989","type":"Radio","name":"单选","col":24,"key":"Radio1584811423989","showFrom":["name","col","key","disabled","radiotype","datatype","option","url"],"radiotype":"yuan","disabled":false,"datatype":"option","url":"","option":[{"value":"Beijing","label":"北京"},{"value":"Shanghai","label":"上海"},{"value":"Tianjin","label":"天津"},{"value":"ChongQing","label":"重庆"}],"rules":[{"required":false,"message":"请输入单选","trigger":"change"}]},{"id":"TableForm1584811404926","type":"TableForm","name":"表格","col":24,"key":"TableForm1584811404926","showFrom":["name","col","key","border","stripe"],"border":true,"stripe":false,"rules":[],"column":[{"id":"Input1584811404926","type":"Input","name":"文本框","col":24,"key":"Input1584811404926","showFrom":["name","col","key","minlength","maxlength","showwordlimit","placeholder","clearable","showpassword","disabled","prefixicon","suffixicon","prepend","append"],"minlength":0,"maxlength":100,"showwordlimit":true,"placeholder":"请输入文本框","clearable":true,"showpassword":false,"disabled":false,"prefixicon":"el-icon-edit","suffixicon":"","prepend":"","append":"","rules":[{"required":false,"message":"请输入文本框","trigger":"change"}]},{"id":"Textarea1584811408850","type":"Textarea","name":"文本域","col":24,"key":"Textarea1584811408850","showFrom":["name","col","key","rows","minlength","maxlength","showwordlimit","placeholder","clearable","disabled"],"rows":1,"minlength":0,"maxlength":100,"showwordlimit":true,"placeholder":"请输入文本域","clearable":true,"disabled":false,"rules":[{"required":false,"message":"请输入文本域","trigger":"change"}]},{"id":"InputNumber1584811409966","type":"InputNumber","name":"计数器","col":24,"key":"InputNumber1584811409966","showFrom":["name","col","key","min","max","step","stepstrictly","precision","disabled","controlsposition","placeholder"],"min":0,"max":10000,"step":1,"stepstrictly":false,"precision":1,"disabled":false,"controlsposition":"right","placeholder":"请输入计数器","rules":[{"required":false,"message":"请输入计数器","trigger":"change"}]},{"id":"Select1584811411105","type":"Select","name":"下拉框","col":24,"key":"Select1584811411105","showFrom":["name","col","key","multiple","collapsetags","placeholder","clearable","disabled","filterable","allowcreate","datatype","option","url"],"multiple":false,"collapsetags":false,"disabled":false,"filterable":false,"allowcreate":false,"placeholder":"请输入下拉框","clearable":true,"datatype":"option","url":"","option":[{"value":"Beijing","label":"北京"},{"value":"Shanghai","label":"上海"},{"value":"Tianjin","label":"天津"},{"value":"ChongQing","label":"重庆"}],"rules":[{"required":false,"message":"请输入下拉框","trigger":"change"}]},{"id":"Switch1584811412361","type":"Switch","name":"开关","col":24,"key":"Switch1584811412361","showFrom":["name","col","key","disabled","activetext","inactivetext","activecolor","inactivecolor"],"disabled":false,"activetext":"开","inactivetext":"关","activecolor":"#409EFF","inactivecolor":"#C0CCDA","rules":[{"required":false,"message":"请输入开关","trigger":"change"}]},{"id":"Slider1584811413461","type":"Slider","name":"滑块","col":24,"key":"Slider1584811413461","showFrom":["name","col","key","min","max","disabled","step","showstops","showinput","range"],"min":0,"max":100,"disabled":false,"step":1,"showstops":false,"showinput":false,"range":false,"rules":[{"required":false,"message":"请输入滑块","trigger":"change"}]},{"id":"Timeselect1584811414533","type":"Timeselect","name":"固定时间","col":24,"key":"Timeselect1584811414533","showFrom":["name","col","key","disabled","placeholder","pickeroptions","clearable","prefixicon"],"disabled":false,"placeholder":"请输入固定时间","clearable":false,"prefixicon":"el-icon-time","pickeroptions":{"start":"09:00","end":"18:00","step":"00:15"},"rules":[{"required":false,"message":"请输入固定时间","trigger":"change"}]},{"id":"Timepicker1584811415546","type":"Timepicker","name":"任意时间","col":24,"key":"Timepicker1584811415546","showFrom":["name","col","key","disabled","placeholder","clearable","prefixicon","isrange","startplaceholder","endplaceholder","rangeseparator"],"disabled":false,"placeholder":"请输入任意时间","clearable":false,"prefixicon":"el-icon-time","isrange":false,"startplaceholder":"开始时间","endplaceholder":"结束时间","rangeseparator":"至","rules":[{"required":false,"message":"请输入任意时间","trigger":"change"}]},{"id":"DatePicker1584811416509","type":"DatePicker","name":"日期","col":24,"key":"DatePicker1584811416509","showFrom":["name","col","key","disabled","placeholder","clearable","prefixicon","datetype","startplaceholder","endplaceholder","rangeseparator"],"placeholder":"请输入日期","clearable":false,"disabled":false,"prefixicon":"el-icon-time","datetype":"date","startplaceholder":"开始时间","endplaceholder":"结束时间","rangeseparator":"至","rules":[{"required":false,"message":"请输入日期","trigger":"change"}]},{"id":"Radio1584811417865","type":"Radio","name":"单选","col":24,"key":"Radio1584811417865","showFrom":["name","col","key","disabled","radiotype","datatype","option","url"],"radiotype":"yuan","disabled":false,"datatype":"option","url":"","option":[{"value":"Beijing","label":"北京"},{"value":"Shanghai","label":"上海"},{"value":"Tianjin","label":"天津"},{"value":"ChongQing","label":"重庆"}],"rules":[{"required":false,"message":"请输入单选","trigger":"change"}]},{"id":"Checkbox1584811418763","type":"Checkbox","name":"多选","col":24,"key":"Checkbox1584811418763","showFrom":["name","col","key","disabled","checkboxtype","datatype","option","url","min","max"],"checkboxtype":"fang","disabled":false,"min":0,"max":2,"datatype":"option","url":"","option":[{"value":"Beijing","label":"北京"},{"value":"Shanghai","label":"上海"},{"value":"Tianjin","label":"天津"},{"value":"ChongQing","label":"重庆"}],"rules":[{"required":false,"message":"请输入多选","trigger":"change"}]}]}]}
    }
  },
  methods: {
    save (data) {
      // 通过校验时 返回 用户提交的表单数据  未通过时 返回false
      if (data) {
        console.log(data)
      }
    }
  }
}
</script>

<style scoped>
.cont{
  width:800px;
  margin: 20px auto
}
</style>

todoList

• [x] 增加分割线，文字
• [x] 下载源码功能
• [x] 增加预设可选字段
• [x] 增加默认值
• [x] 增加正则校验
• [ ] 增加接口配置 单选多选下拉框 内容