# form-item
# 描述
z-elment-ui
将el-form-item
进行了二次封装,整合了常用的form表单组件,添加相关的配置即可.
点击查看代码
<!-- @format -->
<template>
<el-form :model="form" :rules="rules" ref="form" v-bind="$attrs" :label-width="'180px'" label-suffix=":->">
<zFormItem v-for="(item, index) in formList" :key="item.label" v-bind="item">
<template v-if="item.prop === 'name'" #label>
<span>label插槽</span>
</template>
</zFormItem>
<el-form-item>
<el-button type="primary" @click="submit">提交</el-button>
</el-form-item>
</el-form>
</template>
<script>
import zCustomtDemo from './zCustomtDemo.vue';
export default {
name: 'zFormItemDemo',
components: {
zCustomtDemo
},
data() {
return {
form: { age1: '20' },
rules: {
name: [
{ required: true, message: '请输入姓名', trigger: 'blur' },
{ min: 2, max: 5, message: '长度在 2 到 5 个字符', trigger: 'blur' }
]
},
formList: [
{
prop: 'name',
render: 'el-input',
option: {
class: 'border',
style: {
width: '200px'
}
},
slots: {
suffix: () => <i>尾部</i>,
prepend: () => 'Http:/'
},
on: {
input: (e) => {
console.log('input', e);
},
change: (e) => {
console.log('change', e);
}
},
defaultValue: '1'
},
{
prop: 'check_in',
render: 'el-time-select',
label: '使用el-time-select',
option: {
'picker-options': {
start: '08:30',
step: '00:15',
end: '10:30'
},
placeholder: '选择打卡时间1'
}
},
{
prop: 'check_num',
render: 'el-input-number',
label: '使用el-input-number',
option: {
min: 1,
max: 10,
step: 1,
'step-strictly': true,
precision: 0,
'controls-position': 'right',
placeholder: '请输入打卡次数'
}
},
{
prop: 'switch',
label: '开关',
isTag: false,
render: '将isTag设置为false,则不会被包裹在el-form-item中,将会被直接渲染',
defaultValue: false
},
{
prop: 'chekbox',
label: '使用z-checkbox',
render: 'z-checkbox',
option: {
multiple: true,
data: [
{ label: '18', value: '18', disabled: true },
{ label: '19', value: '19' },
{ label: '20', value: '20' }
]
},
defaultValue: ['20']
},
{
prop: 'custom-select',
label: '引入自定义组件',
render: 'zCustomtDemo'
},
{
prop: 'age',
label: '年龄',
render: 'z-select',
option: {
data: [19, 20, 21],
placeholder: '请输入年龄'
},
defaultValue: 20
},
{
prop: 'age1',
label: 'string数据',
render: 'z-select',
option: {
data: '1, 2, 3',
placeholder: '请输入年龄'
},
defaultValue: '1'
},
{
prop: 'type',
label: '类型',
render: 'z-select',
option: {
props: { label: 'a', value: 'b' },
data: [
{ a: 'MAN', b: '18', disabled: true },
{ a: 'MISS', b: '19' },
{ a: 'emmm', b: '20' }
],
placeholder: '请输入年龄'
},
defaultValue: '20'
},
{
prop: 'age1',
label: '年龄1',
render: 'z-radio',
option: {
data: () => {
return new Promise((resolve) => {
setTimeout(() => {
resolve([
{ label: '18', value: '18', disabled: true },
{ label: '19', value: '19' },
{ label: '20', value: '20' }
]);
}, 1000);
});
},
placeholder: '请输入年龄'
},
defaultValue: '20'
}
]
};
},
methods: {
submit() {
this.$refs.form.validate((valid) => {
if (valid) {
this.$message.success('提交成功');
console.log('🚀 ~ this.form', this.form);
} else {
this.$message.error('提交失败');
return false;
}
});
console.log(this.form, this.$attrs);
}
}
};
</script>
提示
如果想在 z-form-item
中使用el-element
中的组件,按照数据格式来进项相关设置即可,option
中可进行相关属性绑定,实例中有体现.
如果使用z-select
z-radio
z-checkbox
等,需要为组件提供data
.
其他属性与使用的组件有关,比如使用el-button
时设置其大小,option为{ size:'mini' }
注意
设置默认值时直接对form
对象赋值,会覆盖defaultValue
的值.
# 属性介绍
字段名称 | 描述 | 格式 |
---|---|---|
prop | 绑定form的字段名,涵盖了el-form-item 中prop字段的作用,并且通过此字段实现form表单响应式数据流 | String |
render | 组件名称或者渲染函数(jsx) | String, Function |
label? | 表单标签名,可以为空,为空则不显示标签,如果在el-form 上设置过label-width 此时会有占位,可以单独给该表单项设置一个 label-width:0 取消占位 | String |
defaultValue | 默认值,如果data 数据为promise 推荐使用直接给form 进行赋值. | -- |
isTag | 默认为true ,当 isTag:false 时 render 将会被作为文本输出 | Boolean |
option | 该组件的配置,如el-option 的disabled placeholder 等等,如果是z-select 需要选项的数据,则需要添加data | Object,根据组件不同添加相关的配置. |
on | 绑定到该组件的事件 | Object |
slots | 组件的插槽 | Object |
更多... | 继承el-form-item 中的属性,如show-message inline-message | el-form-item属性 | Element (opens new window) |
# on与slots
放入on
对象中的方法,都将被绑定到当前组件上,例如el-input
的input
事件,可以这样配置:
on:{
input:(e)=>{
console.log(e)
}
}
slots
的作用是用来补充数据配置状态下 z-form-item
无法完成的功能,例如el-input
中的 suffix
插槽等,例如:
slots:{
suffix:()=> <i>这是尾部文字<i>,
prepend:'这是头部文字'
}