安装

npm install ns-el-auto-form

使用

// main.js
import nsElAutoFormFrom "ns-el-auto-form";
Vue.use(nsElAutoFormFrom);

// xxx.vue
<ns-el-auto-form :formNode="formNode"></ns-el-auto-form>

提交示例

<template>

  <ns-el-auto-form ref="autoForm" :formNode="formNode" >
    <template slot="submit">
      <el-button @click="submit">查询</el-button>
    </template>
  </ns-el-auto-form>

</template>

<script>
  export default {
    methods:{
      submit(){
        let formData = this.$refs['autoForm'].__submit();
        console.log(formData)
      }
    }
  }

</script>

• inline < Boolean > 是否一行显示

• labelWidth < String > 页面显示字段名称 的区域宽度

• style < String > 每一项内联样式

• formNode < Array[Object] >

属性	类型	描述
type	String	input/checkbox/select/radio/dateBlock/dateTimeBlock/dateBlockClassic
label	String	页面显示的字段名称
name	String	传给后台的字段名称（key）
options	options	checkbox/select/radio 的选择项
startName	String	(dateBlock/dateTimeBlock/dateBlockClassic)传给后台的开始时间字段名（key）
endTime	String	(dateBlock/dateTimeBlock/dateBlockClassic)传给后台的结束时间字段名（key）
default	String	默认值
startDefault	String	可取值 today ：当天
endDefault	String	取值同startDefault
quick	Boolean	dateBlockClassic是否开启快捷选择

• options < Array[Object] > 选项

属性	类型	描述
label	String	选项在页面上显示的名称
value	String	选项选中后传给后台的值
childContent	Array	子选项，联动选择 配置项同options