1.2.8 • Published 3 years ago
element-form-plugin v1.2.8
表单插件
基于Element,根据配置为网页添加表单
Features
- 配置Element里的DateTimePicker、Select、Input、Cascader等表单项
- 配置多余的表单项,默认收起,可展开
- 支持“查询”和“重置”
- 给表单项配置默认值
- 动态地显示或隐藏表单项
引入
// main.js
import Vue from 'vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import elementForm from 'element-form-plugin'
import App from './App.vue'
Vue.use(ElementUI)
Vue.use(elementForm)
new Vue({
render: h => h(App),
}).$mount('#app')
// index.vue
<element-form :initItems="items">
<template #Buttons>
<el-button type="primary" @click="save">保存</el-button>
</template>
</element-form>
<!-- <element-form :initItems="items" :initPosition="position" :inline="true" /> -->
<!-- <element-form :initItems="items" /> -->
<script>
export default {
data () {
return {
items: [], // 详见props
position: 2 // 详见props
}
}
}
</script>
props
items
类型:
Array<object>
默认值:
[]
元素的属性的列表:
参数 | 说明 | 类型 | required | 默认值 |
---|---|---|---|---|
tag | Element里的表单项的英文名 | string | true | - |
value | 绑定值 | string | true | - |
label | 表单项的标签 | string | false | - |
options | Select或Cascader的选项的列表,详见options | Array<object> | false | - |
isHidden | 被用于v-if,控制表单项是否渲染 | boolean | false | false |
defaultValue | 表单项的默认值 | any | false | - |
change | 表单项的值变化时触发 | function | false | - |
prepend | 复合型输入框,指定前置的内容,详见prepend | object | false | - |
props | 级联,配置选项,与Element中的一致 | object | false | - |
- options
与Element中的一致,支持异步传入,例:
options: [
{
value: 'apple',
label: '苹果'
},
{
value: 'banana',
label: '香蕉'
}
]
- prepend
position
指定按钮组(查询、重置、更多条件)插入到表单项列表中的索引值
类型:number
默认把按钮组插入到表单项列表的末尾
inline
行内表单模式,与Element中的一致
类型:boolean
Events
事件名 | 说明 | 参数 | 参数类型 |
---|---|---|---|
search | 点击“查询”或“重置”按钮时触发 | 已渲染的所有表单项的值 | object |
例:
// items
[
{
tag: 'Select',
value: 'region',
label: '活动区域',
options: [
{
value: 'beijing',
label: '区域一'
},
{
value: 'shanghai',
label: '区域二'
}
]
}
]
// search事件的参数
{
region: 'beijing'
}
Methods
方法名 | 说明 |
---|---|
getFields | 返回表单内各字段的值 |
resetFields | 重置表单 |
slot
name | 说明 |
---|---|
Buttons | 插入至表单内的按钮,默认为“查询”和“重置” |
1.2.8
3 years ago
1.2.7
3 years ago
1.2.6
3 years ago
1.2.5
3 years ago
1.2.4
3 years ago
1.2.3
3 years ago
1.2.2
3 years ago
1.2.1
3 years ago
1.1.3
3 years ago
1.1.2
3 years ago
1.1.1
3 years ago
1.0.9
4 years ago
1.0.8
4 years ago
1.0.7
4 years ago
1.0.6
4 years ago
1.0.5
4 years ago
1.0.4
4 years ago
1.0.3
4 years ago
1.0.2
4 years ago
1.0.1
4 years ago
1.0.0
4 years ago