在利用elementui写表单的时候， 由于表单中涉及多种form元素，刚开始是用的纯html利用cdn的方式引入的elementui页面整体观感如下：
在这里插入图片描述
后来由于路由跳转的原因， 还是选择了vue-cli 来构建项目， 当把之前写好的代码复原到vue-li项目中的时候，出现了错位情况，如下：
在这里插入图片描述
估计是因为elementui的版本不一致， 可能是vue-cli中elementui版本默认表单元素是居中的。
在这里插入图片描述
对比发现vue-cli版本中的elementui默认是有text-align="center"的， 所以都是居中的， 我们只要改成自己想要的模样就行。
在这里插入图片描述

加一个text-align="left"即可。

理想和现实总是有差距的，居中问题解决了， 但是多选框还是有瑕疵如下：
在这里插入图片描述

经仔细观察， 发现字体不一样， vue-cli自己指定了字体， 该字体宽度较大，所以还是错行了。解决办法： 换字体或者把选项长度短的往前放
在这里插入图片描述

# elementui # css
Logo
Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^

avatar Vue
cover

echarts堆叠柱状图

avatar Vue

Error in v-on handler: "TypeError: Cannot read properties of undefined (reading 'current')"

这是一个 Vue.js 错误，报错信息提示在 v-on 处理程序中出现了错误：“TypeError: Cannot read properties of undefined(读取 'current')”。这意味示在您的代码中，试图读取一个未定义的变量 'current'。您需要检查您的代码，确保 'current' 已正确定义并初始化。...

avatar Vue