# 每行展示多少项
通过设置 widthSize 属性可以改变表单域每行显示项，可选值为 1、2、3、4，默认2————即每行显示两项
若某一项需要单独显示一行（通常是备注或者文本域）需要在 fieldList 中设置 widthSize 为 1
<template>
<t-antd-layout-page>
<t-antd-layout-page-item>
<a-radio-group v-model="widthSize" style="margin-bottom:15px;">
<a-radio-button :value="1">一行展示</a-radio-button>
<a-radio-button :value="2">一行展示2项</a-radio-button>
<a-radio-button :value="3">一行展示3项</a-radio-button>
<a-radio-button :value="4">一行展示4项</a-radio-button>
</a-radio-group>
<t-antd-form
:ref-obj.sync="formOpts.ref"
:formOpts="formOpts"
:widthSize="widthSize"
:labelCol="{ span:widthSize*2}"
:wrapperCol="{ span:24-widthSize*2}"
@handleEvent="handleEvent"
/>
</t-antd-layout-page-item>
</t-antd-layout-page>
</template>
<script>
export default {
name: 'dhFormDemo',
data() {
return {
widthSize: 1,
// form表单
formOpts: {
ref: null,
formData: {
account: undefined, // *用户账号
password: undefined, // *用户密码
name: undefined, // *用户昵称
sex: undefined, // *性别: 0:男 1:女
hobby: [], // *爱好: 0:男 1:女
phone: undefined, // 手机号码
qq: undefined, // qq
accountType: undefined, // *用户类型: 0: 手机注册 1: 论坛注册 2: 管理平台添加
email: undefined, // 邮箱
desc: undefined, // 描述
number: undefined, // 计算器
status: undefined // *状态: 0：停用，1：启用(默认为1)',
},
fieldList: [
{ label: '账号', value: 'account', type: 'input', comp: 'a-input', event: 'account' },
{ label: '密码', value: 'password', type: 'password', comp: 'a-input' },
{ label: '昵称', value: 'name', type: 'input', comp: 'a-input' },
{ label: '性别', value: 'sex', type: 'select-arr', comp: 'a-select', list: 'sexList', bind: { disabled: false }, arrLabel: 'key', arrKey: 'value' },
{ label: '平台用户', value: 'accountType', type: 'select-obj', comp: 'a-select', list: 'accountTypeList' },
{ label: '状态', value: 'status', type: 'select-arr', list: 'statusList', comp: 'a-select', arrLabel: 'key', arrKey: 'value' },
{ label: '爱好', value: 'hobby', type: 'checkbox', comp: 'a-checkbox-group', list: 'hobbyList', event: 'checkbox' },
{ label: '手机号码', value: 'phone', type: 'input', comp: 'a-input', bind: { maxLength: 11 } },
{ label: 'QQ', value: 'qq', type: 'input', comp: 'a-input' },
{ label: '邮箱', value: 'email', type: 'input', comp: 'a-input' },
{ label: '计数器', value: 'number', type: 'inputNumber', bind: { controls: false, min: 2, max: 99 }, comp: 'a-input-number' },
{ label: '描述', value: 'desc', type: 'textarea', comp: 'a-input', widthSize: 1 }
],
operatorList: [
{ label: '提交', type: 'danger', fun: this.submitForm },
{ label: '重置', type: 'primary', fun: this.resetForm }
],
// 相关列表
listTypeInfo: {
hobbyList: [
{ label: '吉他', value: '0' },
{ label: '看书', value: '1' },
{ label: '美剧', value: '2' },
{ label: '旅游', value: '3' },
{ label: '音乐', value: '4' }
],
sexList: [
{ key: '女', value: 1 },
{ key: '男', value: 0 }
],
accountTypeList: {
0: '手机用户',
1: '论坛用户',
2: '平台用户'
},
statusList: [
{ key: '启用', value: 1 },
{ key: '停用', value: 0 }
]
}
}
}
},
// 方法
methods: {
// 触发事件
handleEvent(type, val) {
switch (type) {
case 'checkbox':
console.log(`handleEvent事件监听${type}：`, val, type)
break
}
},
// 提交form表单
submitForm() {
this.formOpts.ref.validate((valid) => {
if (!valid) return
console.log('最终数据', this.formOpts.formData)
})
},
// 重置form表单
resetForm() {
Object.assign(
this.$data.formOpts.formData,
this.$options.data().formOpts.formData
)
}
}
}
</script>
显示代码