# 栅格表单
# 描述
z-grid-form 使用 el-form el-row el-col z-form-item 实现.
支持所有的el-form属性以及方法.
点击查看代码
<!-- @format -->
<template>
<div>
<el-button type="primary" plain @click="getData"> 获取数据 </el-button>
<el-button type="primary" plain @click="checkType"> 切换模式 </el-button>
<z-grid-form v-model="form" :rules="rules" :items="formList" label-width="140px" ref="zGridForm" :textModel="textModel"> </z-grid-form>
</div>
</template>
<script>
export default {
name: 'zGridFormDemo',
data() {
return {
form: { age1: '20' },
textModel: false,
rules: {
name: [
{ required: true, message: '请输入姓名', trigger: 'blur' },
{ min: 2, max: 5, message: '长度在 2 到 5 个字符', trigger: 'blur' }
]
},
formList: [
{
prop: 'name',
render: 'el-input',
'label-width': '0',
option: {
class: 'border'
},
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',
class: 'border',
span: 12,
option: {
'picker-options': {
start: '08:30',
step: '00:15',
end: '10:30'
},
style: { width: '100%' },
placeholder: '选择打卡时间1'
}
},
{
prop: 'switch',
label: '开关',
span: 12,
class: 'border',
isTag: false,
render: '将isTag设置为false将会被直接渲染'
},
{
prop: 'chekbox',
label: '使用z-checkbox',
render: 'z-checkbox',
span: 8,
class: 'border',
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',
class: 'border',
span: 8
},
{
prop: 'age',
label: '年龄',
render: 'z-select',
span: 8,
class: 'border',
option: {
data: [19, 20, 21],
placeholder: '请输入年龄'
},
defaultValue: 20
},
{
prop: 'age12',
label: '年龄1',
render: 'z-radio',
class: 'border',
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: {
getData() {
console.log(this.$refs.zGridForm, this.form);
},
checkType() {
this.textModel = !this.textModel;
console.log(this.form);
}
}
};
</script>
<style scoped>
.example {
margin-bottom: 10px;
float: right;
}
</style>
# 响应式表单
使用responsive:true开启表单响应式
点击查看代码
<!-- @format -->
<template>
<div>
<el-button v-for="item in [2000, 1000, 500]" type="primary" plain :key="item" @click="() => (width = item + 'px')"> 宽度{{ item }}px </el-button>
<div :style="{ overflow: 'auto', margin: '12px' }">
<z-grid-form :style="{ width }" :form="form" :rules="rules" :items="formList" label-width="140px" responsive></z-grid-form>
</div>
</div>
</template>
<script>
export default {
name: 'zGridFormResponsiveDemo',
data() {
return {
form: { age1: '20' },
width: '100%',
rules: {
name: [
{ required: true, message: '请输入姓名', trigger: 'blur' },
{ min: 2, max: 5, message: '长度在 2 到 5 个字符', trigger: 'blur' }
]
},
formList: [
{
prop: 'name',
render: 'el-input',
'label-width': '0',
span: 24,
class: 'border',
option: {
style: { width: '100%' }
},
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',
class: 'border',
option: {
'picker-options': {
start: '08:30',
step: '00:15',
end: '10:30'
},
style: { width: '100%' },
placeholder: '选择打卡时间1'
}
},
{
prop: 'chekbox',
label: '使用z-checkbox',
render: 'z-checkbox',
class: 'border',
option: {
multiple: true,
data: [
{ label: '18', value: '18', disabled: true },
{ label: '19', value: '19' }
]
},
defaultValue: ['20']
},
{
prop: 'age',
label: '年龄',
render: ({ vmodel }) => {
console.log(vmodel);
return <el-input v-model={vmodel.age} placeholder="请输入年龄" />;
},
class: 'border'
},
{
prop: 'age1',
label: 'string数据',
render: 'z-select',
class: 'border',
option: {
data: '1, 2, 3',
placeholder: '请输入年龄'
},
defaultValue: '1'
},
{
prop: 'age12',
label: '年龄1',
render: 'z-radio',
class: 'border',
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'
},
{
prop: 'switch',
label: '开关',
isTag: false,
class: 'border',
render: '将isTag设置为false将会被直接渲染',
defaultValue: false
},
{
prop: 'custom-select',
label: '引入自定义组件',
class: 'border',
render: 'zCustomtDemo'
}
]
};
}
};
</script>
<style scoped></style>
# z-grid-form Attributes
| name | description | 注意 |
|---|---|---|
| v-model | 将要绑定到 el-form model 上的对象 | 必传 object |
| items | 要渲染的字段列表,详情见 | 必传 Array |
| rules | 与 el-form 中的 rules 保持一致 | object |
| responsive | 是否开始响应式,默认为 false | boolean |
| tag | 同 el-tag tag | string |
| type | 同 el-tag type | string |
| justify | 同 el-tag justify | string |
| align | 同 el-tag align | string |
| responsiveMethod | 详情见下方 | `````` |
| 更多... | --- | 继承el-form的全部属性, 更多属性 (opens new window) |
# responsivemethod
如果你开启了响应式,并且想自己定义span的分配逻辑,那么你可以传入一个方法.默认为
注意
此方法接受一个width当前form表单的宽度
并且必须返回一个对象,例如: { span: 4 }
(width) => {
let span = 24;
if (width >= 500 && width < 900) span = 12;
if (width >= 900 && width < 1200) span = 8;
if (width >= 1200 && width < 1600) span = 6;
if (width >= 1600) span = 4;
return { span };
}