vue-autoform-ljt v0.1.3

自动生成表单

基于element-ui，需要先安装element-ui并引入样式。

个人学习使用，仅供参考

下载

npm i vue-autoform-ljt

效果图

使用demo

<template>
  <div class="hello">
    <div style="width: 400px;border: 1px solid #ccc;padding:10px">
      <my-form ref="myForm" title="自动生成表单案例" :items="loginItems" @submit="submit" @test="test"></my-form>
    </div>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data(){
    return {
      loginItems: [
        [ 
          {label: '活动名称', type: 'input', colspan: 24, key: 'name'},
          // {label: '密码', type: 'input', colspan: 12, key: 'password', attrs: {placeholder: '请输入密码'}}  // attrs给原生属性留个口子,可以用原生属性
        ],
        [
          {label: '性别', type: 'select', colspan: 24, value: 1, key: 'gender', options: [
            {label: '男', value: 1},
            {label: '女', value: 2}]
          }
        ],
        [
          {label: '活动时间', type: 'date', colspan: 13, key: 'date1'},
          {label: '-', type: 'span', colspan: 2},
          {type: 'date', colspan: 9, key: 'date2'},
        ],
        [
          {label: '即时配送', value: false, colspan: 2, type: 'switch', key: 'delivery'}
        ],
        [
          {label: '活动性质', value: [], type: 'checkBoxGroup', colspan: 24, key: 'groupList', groups: [
            {label: 'food', name: '美食'},
            {label: 'sport', name: '运动'},
            {label: 'sport1', name: '运动1'},
            {label: 'sport2', name: '运动2'},
            ]
          }
        ],
        [
          {label: '特殊资源', value: '', type: 'radioGroup', colspan: 14, key: 'radioList', groups: [
            {label: '1', name: '资源1'},
            {label: '2', name: '资源1'}
            ]
          }
        ],
        [
          {label: '活动形式', type: 'texteara', colspan: 24, key: 'desc'},
        ],
        [
          {label: '取消', type: 'button', colspan: 5, click: 'clean'},
          {label: '恢复', type: 'button', colspan: 5, click: 'recover'},
          {label: '提交', type: 'button', colspan: 5, click: 'submit'},
          {label: '测试', type: 'button', colspan: 5, click: 'test'},
        ] 
      ],
    }
  },
  methods: {
    test(){
      alert(1)
    },
    submit(a){
      console.log(a);
    }
  }
}
</script>