记录一下Ant Design Vue的表单布局自适应
主要是labelCol和wrapperCol的使用<a-form-model ref="infoForm":model="formData":rules="formRules":label-col="labelCol":wrapper-col="wrapperCol"><a-row
·
主要是labelCol和wrapperCol的使用
<a-form-model ref="infoForm"
:model="formData"
:rules="formRules"
:label-col="labelCol"
:wrapper-col="wrapperCol">
<a-row :gutter="24">
<a-col :xs="24"
:sm="24"
:xl="8"
:xxl="6">
<a-form-model-item label="风险类型"
prop="typeName">
<a-select v-model="formData.typeName" :disabled="formData.disabled">
<a-select-option v-for="(val, key, index) in typeMap"
:key="val"
:value="key">{{key}}</a-select-option>
</a-select>
</a-form-model-item>
</a-col>
<a-col :xs="24"
:sm="24"
:xl="8"
:xxl="6">
<a-form-model-item label="风险等级"
prop="level">
<a-select v-model="formData.level" :disabled="formData.disabled">
<a-select-option :value="'0'">低</a-select-option>
<a-select-option :value="'1'">中</a-select-option>
<a-select-option :value="'2'">高</a-select-option>
</a-select>
</a-form-model-item>
</a-col>
<a-col :xs="24"
:sm="24"
:xl="8"
:xxl="6">
<a-form-model-item label="供应商名称"
prop="supplierName">
<a-select v-model="formData.supplierName"
show-search>
<a-select-option v-for="(val, key, index) in supplierMap"
:key="key"
:value="key"
:disabled="formData.disabled">{{ key }}</a-select-option>
</a-select>
</a-form-model-item>
</a-col>
<a-col :xs="24"
:sm="24"
:xl="8"
:xxl="6">
<a-form-model-item label="邮件通知人"
prop="mailNotifiers">
<a-select v-model="formData.mailNotifiers"
mode="multiple"
:disabled="formData.disabled">
<a-select-option :value="'supplier'">供应商</a-select-option>
<a-select-option :value="'category'">品类</a-select-option>
<a-select-option :value="'category_leader'">品类领导</a-select-option>
<a-select-option :value="'jt_jgw'">价格委员会</a-select-option>
</a-select>
</a-form-model-item>
</a-col>
</a-row>
<a-row>
<a-form-model-item label="风险描述"
prop="description"
:label-col="{xs:{span: 10},
sm:{ span: 10, },
xl: { span: 3 },
xxl: { span: 2 }, }"
:wrapper-col="{xs: { span: 14 },
sm: { span: 14, },
xl: { span: 21 },
xxl: { span: 22 },
}">
<a-textarea v-model="formData.description" :disabled="formData.disabled" />
</a-form-model-item>
</a-row>
</a-form-model>
效果图
更多推荐
已为社区贡献4条内容
所有评论(0)