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

效果

修改前

修改后

相关推荐
江城开朗的豌豆20 分钟前
Vuex数据突然消失?六招教你轻松找回来!
前端·javascript·vue.js
江城开朗的豌豆30 分钟前
Vue状态管理进阶:数据到底是怎么"跑"的?
前端·javascript·vue.js
架构个驾驾37 分钟前
从0到1搭建Vue3+Vant移动端项目(一)
前端·javascript·vue.js
梨子同志1 小时前
Vue 生命周期
前端·vue.js
梨子同志1 小时前
Vue 组件通信详解
前端·vue.js
拾光拾趣录1 小时前
深入解析 Vue.nextTick 源码:异步更新机制的核心实现
前端·vue.js
markyankee1011 小时前
Vue 指令系统:构建动态界面的核心利器
javascript·vue.js
拾光拾趣录1 小时前
在 Vue 中使用 SVG 图标
前端·vue.js·svg
顽疲3 小时前
从零用java实现 小红书 springboot vue uniapp(13)模仿抖音视频切换
java·vue.js·spring boot
加减法原则11 小时前
Vue3 组合式函数:让你的代码复用如丝般顺滑
前端·vue.js