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

效果

修改前

修改后

相关推荐
浪裡遊29 分钟前
Sass详解:功能特性、常用方法与最佳实践
开发语言·前端·javascript·css·vue.js·rust·sass
markyankee1012 小时前
使用 Vue 脚手架创建项目的完整指南
vue.js
青松学前端2 小时前
vue-2.7源码解读之初始化流程和响应式实现
前端·vue.js·前端框架
流星稍逝2 小时前
Vue3 + Uniapp 图片压缩公共方法封装
前端·vue.js
eric*16883 小时前
尚硅谷张天禹老师课程配套笔记
前端·vue.js·笔记·vue·尚硅谷·张天禹·尚硅谷张天禹
菌菇汤5 小时前
uni-app实现单选,多选也能搜索,勾选,选择,回显
前端·javascript·vue.js·微信小程序·uni-app·app
qq_411671985 小时前
vue3 的模板引用ref和$parent
前端·javascript·vue.js
清幽竹客6 小时前
vue-37(模拟依赖项进行隔离测试)
前端·vue.js
vvilkim6 小时前
Nuxt.js 页面与布局系统深度解析:构建高效 Vue 应用的关键
前端·javascript·vue.js
paopaokaka_luck6 小时前
基于SpringBoot+Vue的电影售票系统(协同过滤算法)
vue.js·spring boot·后端