<Form
:model="formStateExpensereim"
:label-col="labelCol"
:wrapper-col="wrapperCol"
layout="horizontal"
style="padding: 0px 20px"
ref="formRef"
>
<Row :gutter="20">
<Col :span="8">
<FormItem
label="报销时间"
name="rdate"
labelAlign="left"
:rules="[{ required: true, message: '报销时间' }]"
>
<DatePicker v-model:value="formStateExpensereim.date" style="width: 100%" allowClear />
</FormItem>
</Col>
<Col :span="16">
<FormItem
label="报销说明"
name="rcontent"
labelAlign="left"
:rules="[{ required: true, message: '报销详细说明' }]"
:wrapperCol="{ span: 24 }"
style="width: 100%"
>
<Textarea
v-model:value="formStateExpensereim.rcontent"
allowClear
:auto-size="{ minRows: 2, maxRows: 5 }"
:style="{ width: '100%' }"
/>
</FormItem>
</Col>
</Row>
...
</Form>
Form下的
<script lang="ts" setup>
const wrapperCol = { span: 18 };
</sript>
报销说明,只要设置 :wrapperCol="{ span: 24 }",这样就可以100%显示了。
当然,直接将Form的wrapperCol = { span: 24} 也是可以的,这样就不用设置FormItem。
<script lang="ts" setup>
const wrapperCol = { span: 24 };
</sript>