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

效果

修改前

修改后

相关推荐
Sheldon一蓑烟雨任平生16 分钟前
Vue3 组件 v-model
vue.js·vue3·v-model·definemodel·v-model修饰符·自定义双向绑定组件·多个v-model绑定
OpenTiny社区32 分钟前
如何使用 TinyEditor 快速部署一个协同编辑器?
前端·vue.js
胖虎26533 分钟前
打造梦幻粒子动画效果:基于 Vue 的 Canvas 实现方案
vue.js
李剑一2 小时前
vite框架下大屏适配方案
前端·vue.js·响应式设计
胖虎2652 小时前
从零搭建 Vue3 富文本编辑器:基于 Quill可扩展方案
vue.js
濑户川3 小时前
Vue3 计算属性与监听器:computed、watch、watchEffect 用法解析
前端·javascript·vue.js
前端九哥3 小时前
我删光了项目里的 try-catch,老板:6
前端·vue.js
顽疲3 小时前
SpringBoot + Vue 集成阿里云OSS直传最佳实践
vue.js·spring boot·阿里云
一 乐4 小时前
车辆管理|校园车辆信息|基于SprinBoot+vue的校园车辆管理系统(源码+数据库+文档)
java·前端·数据库·vue.js·论文·毕设·车辆管理
百锦再4 小时前
Python、Java与Go:AI大模型时代的语言抉择
java·前端·vue.js·人工智能·python·go·1024程序员节