《ElementPlus 与 ElementUI 差异集合》el-form-item CSS 属性 display 有变化

差异

  • element-ui el-form 中,属性display: flex; 导致元素在一排;
  • element-plus el-form 中,属性display: block; 元素按照自己的属性排列;
css 复制代码
/* element ui */
display: block;

/*element plus */
display: flex;

如图所示

解决方案

如果非得用回原来的效果,有两种方案。

方案一

代码第 1 行。直接设置 CSS 属性 display

html 复制代码
<el-form-item label="favicon:" style="display:block;">
    <el-input v-model="form.faviconFileNmae" readonly="" class="el-btn-input"></el-input>
	<el-button type="primary" @click="updateFile(1)">上传</el-button>
</el-form-item>   

方案二

代码第 5-7 行。换成两行,且不设置属性 label

html 复制代码
<el-form-item label="favicon:">
    <el-input v-model="form.faviconFileNmae" readonly="" class="el-btn-input"></el-input>
	<el-button type="primary" @click="updateFile(1)">上传</el-button>
</el-form-item>        
<el-form-item>
	<div class="el-upload__tip">推荐分辨率:32 x 32</div>
</el-form-item>

效果

修改前

修改后

相关推荐
顽疲1 小时前
从零用java实现 小红书 springboot vue uniapp(13)模仿抖音视频切换
java·vue.js·spring boot
加减法原则9 小时前
Vue3 组合式函数:让你的代码复用如丝般顺滑
前端·vue.js
天若有情67310 小时前
React、Vue、Angular的性能优化与源码解析概述
vue.js·react.js·angular.js
草巾冒小子10 小时前
vue3实战:.ts文件中的interface定义与抛出、其他文件的调用方式
前端·javascript·vue.js
eggcode11 小时前
Vue+Openlayers加载OSM、加载天地图
vue.js·openlayers·webgis
武昌库里写JAVA14 小时前
vue3面试题(个人笔记)
java·vue.js·spring boot·学习·课程设计
lalalalalalalala15 小时前
开箱即用的 Vue3 无限平滑滚动组件
前端·vue.js
前端Hardy15 小时前
8个你必须掌握的「Vue」实用技巧
前端·javascript·vue.js
布兰妮甜16 小时前
开发在线商店:基于Vue2+ElementUI的电商平台前端实践
前端·javascript·elementui·vue
久爱@勿忘16 小时前
第二章:创建登录页面
前端·vue.js·elementplus