【前端】 el-form-item的label由于字数多自行换行调整
两个el-col span均为12,中间还有很大空格,但是前面的label就是换行,不论如何调整span比例都没用如上图,标签换行了。
·
问题:
两个el-col span均为12,中间还有很大空格,
但是前面的label就是换行,不论如何调整span比例都没用
<el-row style="display: flex; justify-content: center; ">
<el-col :span="12" >
<el-form-item label="签约安排时间" prop="signingScheduleTime" >
<el-date-picker clearable
v-model="form.signingScheduleTime"
type="datetime"
value-format="yyyy-MM-dd HH:mm:ss"
placeholder="请选择时间"
>
</el-date-picker>
</el-form-item>
</el-col>
<el-col :span="12" >
<el-form-item label="签约状态">
<el-select
v-model="form.signingStatus"
placeholder="请选择"
clearable
>
<el-option
v-for="dict in dict.type.sign_status"
:key="dict.value"
:label="dict.label"
:value="dict.label"
/>
</el-select>
</el-form-item>
</el-col>
</el-row>

如上图,标签换行了
解决方法:
加入 label-width="auto"即可
代码如下:
<el-row style="display: flex; justify-content: center; ">
<el-col :span="12" >
<el-form-item label="签约安排时间" prop="signingScheduleTime" label-width="auto" style="margin-left: 20px">
<el-date-picker clearable
v-model="form.signingScheduleTime"
type="datetime"
value-format="yyyy-MM-dd HH:mm:ss"
placeholder="请选择时间"
>
</el-date-picker>
</el-form-item>
</el-col>
<el-col :span="12" >
<el-form-item label="签约状态" label-width="auto">
<el-select
v-model="form.signingStatus"
placeholder="请选择"
clearable
>
<el-option
v-for="dict in dict.type.sign_status"
:key="dict.value"
:label="dict.label"
:value="dict.label"
/>
</el-select>
</el-form-item>
</el-col>
</el-row>
标签完整显示在一行

魔乐社区(Modelers.cn) 是一个中立、公益的人工智能社区,提供人工智能工具、模型、数据的托管、展示与应用协同服务,为人工智能开发及爱好者搭建开放的学习交流平台。社区通过理事会方式运作,由全产业链共同建设、共同运营、共同享有,推动国产AI生态繁荣发展。
更多推荐

所有评论(0)