el-form表单el-form-item label不换行问题及解决
作者：大大大大码龙
这篇文章主要介绍了el-form表单el-form-item label不换行问题及解决方案,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
el-form表单 el-form-item label不换行
因为最近一直在写前端页面, 对样式要求也慢慢变高了
所以出现对这个稍微有点强迫症.....
代码如下：
其他form也是差不多的写法, 但是就这个表达式, 因为多一个字, 导出出现换行的问题
也百度了很多, 大部分都是要改css的, 个人觉得很麻烦
也问了同事... 说给个宽试试.....然后
最终解决了
<el-dialog :title="title" :visible.sync="open" width="35%" append-to-body>
<el-form ref="form" :model="form" :rules="rules" label-width="120px">
<el-form-item label="标签名称" prop="tagName">
<el-input v-model="form.tagName" placeholder="请输入标签名称"/>
</el-form-item>
<el-form-item label="正则表达式" prop="tagExp">
<el-input v-model="form.tagExp" placeholder="请输入正则表达式" style="width: 300px; margin-right: 10px"/>
<el-tooltip content="校验结果; 如:'^\-[1-9][0-9]*$','^[0-9]*$'" placement="top">
<el-button icon="el-icon-bell" circle @click="checkRegular"/>
</el-tooltip>
</el-form-item>
</el-form>
</el-dialog>代码如上 ↑
效果如下 ↓
就全部对齐了
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。