《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>

效果

修改前

修改后

相关推荐
知识分享小能手12 小时前
React学习教程,从入门到精通, React 属性(Props)语法知识点与案例详解(14)
前端·javascript·vue.js·学习·react.js·vue·react
魔云连洲12 小时前
深入解析:Vue与React的异步批处理更新机制
前端·vue.js·react.js
前端工作日常15 小时前
我学习到的Vue2.6的prop修饰符
vue.js
小菜全15 小时前
基于若依框架Vue+TS导出PDF文件的方法
javascript·vue.js·前端框架·json
赵得C15 小时前
【前端技巧】Element Table 列标题如何优雅添加 Tooltip 提示?
前端·elementui·vue·table组件
wow_DG15 小时前
【Vue2 ✨】Vue2 入门之旅 · 进阶篇(一):响应式原理
前端·javascript·vue.js
weixin_4569042715 小时前
UserManagement.vue和Profile.vue详细解释
前端·javascript·vue.js
ST.J15 小时前
前端笔记2025
前端·javascript·css·vue.js·笔记
还有多远.17 小时前
jsBridge接入流程
前端·javascript·vue.js·react.js
半花19 小时前
【Vue】defineProps、defineEmits 和 defineExpose
前端·vue.js