Vue项目保持element组件同行,设置组件不自动换行问题
更新时间：2023年02月06日 10:31:12 作者：潇I洒
这篇文章主要介绍了Vue项目保持element组件同行,设置组件不自动换行问题。具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
Vue保持element组件同行，设置组件不自动换行
因为Vue是响应式的，所以就想做个计算器来用下，样式就使用了element。
想要做成的效果是这样一个加减乘除
X+Y=M22+33=55
但是由于element中的组件自动换行了，所以出来的结果是这样的：
<el-row>
<el-col :span="8"><div class="grid-content bg-purple">
<el-input v-model="num1" placeholder="请输入数字1">
</el-input>
<el-select slot="prepend" v-model="select" placeholder="请选择">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
<el-input v-model="num2" placeholder="请输入数字2">
</el-input>
</div></el-col>
<el-col :span="8"><div class="grid-content bg-purple-light">
<el-button>=</el-button>
{{ getNum() }}
</div></el-col>
<el-col :span="8"><div class="grid-content bg-purple"></div></el-col>
</el-row>这样的样式不仅分行难看，输入框又太过长了，那么要怎么做成可以让左边的三个组件放在同一行呢？
如果我们看过源码，知道可以通过插槽的方式来实现：
<el-row>
<el-col :span="8"><div class="grid-content bg-purple">
<el-input v-model="num2" placeholder="请输入数字2">
<!--num2的前置插槽-->
<el-input slot="prepend" v-model="num1" placeholder="请输入数字1">
<!--num1的后置插槽-->
<el-select slot="append" v-model="select" placeholder="请选择">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</el-input>
</el-input>
</div></el-col>
<el-col :span="8"><div class="grid-content bg-purple-light">
<el-button>=</el-button>
{{ getNum() }}
</div></el-col>
<el-col :span="8"><div class="grid-content bg-purple"></div></el-col>
</el-row>
噗~
有话好好说，别打人！
虽然难看是难看了一点，至少说需求达到了，结果也是正确的嘛！
虽然有点不太成功，但是记得曾经看过表单是有行内表单的，能够把各个组件放在一起
经过查看源码，发现其实这个属性也就是绑定了一个样式而已，那么，我们手动做起来的时候，是不是也可以从样式的方面来考虑呢？
至于样式之类的，我不是很熟悉，但相信是一个解决之道。
为了尽快达到效果，我使用了表格的形式，就是在这几个之间加上<td>：
<el-row>
<el-col :span="8">
<div class="grid-content bg-purple" style="float: left">
<td>
<el-input v-model="num1" placeholder="请输入数字1">
</el-input>
</td>
<td>
<el-select v-model="select" placeholder="请选择">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</td>
<td>
<el-input v-model="num2" placeholder="请输入数字2">
</el-input>
</td>
</div></el-col>
<el-col :span="8"><div class="grid-content bg-purple-light">
<el-button>=</el-button>
{{ getNum() }}
</div></el-col>
<el-col :span="8"><div class="grid-content bg-purple"></div></el-col>
</el-row>
经过这样一番折腾，效果总算像个样子了，但是为了更好看，后续还需要努力研究一下才行。
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了Vue动态组件component标签的用法,在Vue中，可以通过component标签的is属性动态指定标签，本文通过示例代码给大家介绍的非常详细，需要的朋友可以参考下2022-08-08
本文主要介绍了Element中使用ECharts的项目实践，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2022-07-07
下面小编就为大家分享一篇Vue2.0 http请求以及loading展示实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-03-03
Vue如何使用Promise.all()方法并行执行多个请求
在Vue中,可以使用Promise.all()方法并行执行多个异步请求,当所有请求都成功返回时,Promise.all()将返回一个包含所有请求结果的数组,如果其中任何一个请求失败,则会触发catch()方法并返回错误信息,这种方式可以显著提高程序的性能和响应速度2025-01-01
这篇文章主要介绍了vue跳转方式（打开新页面）及传参操作,结合实例形式分析了vue.js跳转实现方式与参数接受相关操作技巧,需要的朋友可以参考下2020-01-01
这篇文章主要介绍了vue parseHTML函数源码解析之析器遇到结束标签的示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-07-07
这篇文章主要为大家介绍了Vue实现电商网站商品放大镜效果示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-10-10
本篇文章主要介绍了浅谈vue,angular,react数据双向绑定原理分析，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-11-11
关于Elementui中toggleRowSelection()方法实现分页切换时记录之前选中的状态
这篇文章主要介绍了关于Elementui中toggleRowSelection()方法实现分页切换时记录之前选中的状态,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-03-03
这篇文章主要为大家详细介绍了vue实现购物车的小练习，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-12-12
最新评论