1.0.2 • Published 4 years ago
ns-el-auto-form v1.0.2
安装
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 < ArrayObject >
| 属性 | 类型 | 描述 |
|---|---|---|
| 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 < ArrayObject > 选项
| 属性 | 类型 | 描述 |
|---|---|---|
| label | String | 选项在页面上显示的名称 |
| value | String | 选项选中后传给后台的值 |
| childContent | Array | 子选项,联动选择 配置项同options |