让el-input与其他组件能够显示在同一行

让el-input与其他组件能够显示在同一行

说明:由于el-input标签使用会默认占满一行,所以在某些需要多个展示一行的时候不适用,因此需要能够跟其他组件显示在同一行。

效果
在这里插入图片描述

1、el-input标签内使用css属性inline

111<el-input style="display:inline"></el-input>
222<el-input style="display: inline;"></el-input>

2、使用el-row行标签和el-col列标签共同使用,并使用到el-col的span属性(总共一行分为24段,可以自定义一列占多少段)

<el-row>333<el-col :span="2"><el-input></el-input></el-col>444<el-col :span="5"><el-input></el-input></el-col><el-button type="success">111</el-button>
</el-row>

3、利用el-form标签进行实现 字+输入框 效果

<el-form ref="form" label-width="100px"><el-form-item label="商品名称:"><el-input v-model="name" placeholder="请输入内容"></el-input></el-form-item><el-form-item label="商品价格:"><el-input v-model="price" placeholder="请输入内容"></el-input></el-form-item>
</el-form>

4、使用css的display:flex流动布局

<div style="display:flex">11<el-input></el-input>22<el-input></el-input><el-button type="success">111</el-button>
</div>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/745135.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

uniapp运行钉钉小程序

因项目原因&#xff0c;公司需要在钉钉里面开发小程序。之前用uniapp开发过app&#xff0c;H5&#xff0c;小程序。还真没尝试过钉钉小程序&#xff0c;今天就简单的记录下uniapp运行钉钉小程序中的过程。 在项目目录新建package.json文件&#xff0c;在文件中添加如下代码&am…

异构计算关键技术之多线程技术(四)

异构计算关键技术之多线程技术&#xff08;四&#xff09; 最近遇到了一个项目&#xff0c;需要写一个用户态的测试程序&#xff08;独立进程&#xff09;&#xff0c;用来测试FPGA PCIe DMA的性能&#xff0c;具体的要求如下&#xff1a; 1. 需要一个主线程&#xff0c;用来…

指针的函数传参的详细讲解(超详细)

如果对指针基础知识已经有可以直接跳到 函数的指针传参与解引用&#xff0c;哪里不明白可以评论&#xff0c;随时解答。 目录 所以就有了一句话&#xff1a;指针就是地址&#xff0c;地址就是指针 对于指针在C语言中&#xff0c;指针类型就是数据类型&#xff0c;是给编译器…

诚意满满之MySQL实现事务隔离的秘诀:锁与MVCC

如果对事务没有太多理解&#xff0c;可以看前面三篇&#xff1a; 诚意满满之讲透事务 诚意满满之讲透事务隔离级别 诚意满满之MySQL如何实现原子性、持久性 不看前两篇也没有关系&#xff0c;知识点是独立的。 MySQL的四个事务隔离级别&#xff1a;读未提交、读已提交、可重…

GoLang:云原生时代致力于构建高性能服务器的后端语言

Go语言的介绍 概念 Golang&#xff08;也被称为Go&#xff09;是一种编程语言&#xff0c;由Google于2007年开始设计和开发&#xff0c;并于2009年首次公开发布。Golang是一种静态类型、编译型的语言&#xff0c;旨在提供高效和可靠的软件开发体验。它具有简洁的语法、高效的编…

JS-12-关键字this、apply()、call()

一、对象的方法 在一个对象中绑定函数&#xff0c;称为这个对象的方法。 示例&#xff1a; 1、对象&#xff1a; var xiaoming {name: 小明,birth: 1990 }; 2、给xiaoming绑定一个函数。比如&#xff0c;写个age()方法&#xff0c;返回xiaoming的年龄&#xff1a; var x…

SwiftUI的context Menu

SwiftUI的 context Menu 现在来演示一下如何使用 SwiftUI 的 Context Menu 。 代码&#xff1a; import SwiftUIstruct ContextMenuBootCamp: View {State var bgColor: Color .purplevar body: some View {VStack(alignment: .leading, spacing: 10.0) {Image(systemName: …

LLVM-3.5 —— 01记,编译 LLVM 3.5.0 clang and clang-query

包括编译&#xff1a;clang clang-tools-extra 0, prepare env sudo apt install llvm sudo apt install clang 使用最新的g 会出错。 1, source code $ git clone --recursive $ cd llvm-project $ git checkout llvmorg-3.5.0 $ cp -r ./clang ./llvm/tools/ $ mkdir llv…

冥想与AI:打造定制的放松体验

如今&#xff0c;在浏览网页或社交网络时&#xff0c;您似乎很难对一条条心理健康信息无动于衷。遇到这种情况的可不只是您。当今不断变化的时代给人们平添压力&#xff0c;企业纷纷利用智能技术满足人们的减压需求&#xff0c;让人们的生活多一些平和从容。 冥想就是一种练习呼…

高效Go编程: encoding/csv标准库深度解析

高效Go编程: encoding/csv标准库深度解析 引言了解encoding/csv库CSV文件的基本结构encoding/csv库的核心功能应用场景 读取CSV文件基本步骤代码示例处理不同的分隔符错误处理 处理CSV数据数据解析代码示例处理不规则数据代码示例 写入CSV文件基本步骤代码示例自定义设置错误处…

Vue组件之间的通信方式

文章目录 组件间通信的概念组件间通信的分类组件间通信的方案父组件将方法传递给子组件&#xff08;props&#xff09;子组件向父组件传值(emit)通过 ref 属性获取DOM元素EventBus p a r e n t 或 parent 或 parent或 root a t t r s 与 attrs 与 attrs与 listeners provide 与…

Kotlin编程权威指南学习知识点预览

一、变量、常量和类型&#xff1a; 变量、常量以及 Kotlin 基本数据类型。变量和常量在 应用程序中可用来储值和传递数据。类型则用来描述常量或变量中保存的是什么样的数据。 1、声明变量: // 变量定义关键字 —— 变量名 —— 类型定义 —— 赋值运算符 —— 赋值var na…

cesium wall 扩散墙(动态立体墙效果 Primitive 方法)

cesium wall 扩散墙(动态立体墙效果)以下为源码直接复制可用 1、实现思路 1、此效果运用cesium 中 Primitive 方法,通过传入中心点、半径、顶点数、颜色来进行加载。 2、运用 Math 方法 对传进来的中心点、半径、定点数,来计算个顶点经纬度。 3、通过Primitive 方法中upda…

643.子数组最大平均数

题目&#xff1a;给你一个由 n 个元素组成的整数数组 nums 和一个整数k。 找出平均数最大且长度为 k 的连续子数组&#xff0c;并输出该最大平均数。 任何误差小于10^-5 的答案都将被视为正确答案。 解题思路&#xff1a;规定了子数组的长度为k&#xff0c;因此可以通过寻找子…

洛谷——P1352 没有上司的舞会

题目描述 某大学有 n 个职员&#xff0c;编号为1…n。 他们之间有从属关系&#xff0c;也就是说他们的关系就像一棵以校长为根的树&#xff0c;父结点就是子结点的直接上司。 现在有个周年庆宴会&#xff0c;宴会每邀请来一个职员都会增加一定的快乐指数 ri​&#xff0c;但…

【MySQL】深入解析索引实现原理

文章目录 1、索引介绍2、索引分类2.1、数据结构HashB Tree 2.2、存储方式聚簇索引非聚簇索引 2.3、功能特性主键索引唯一索引普通索引 2.4、字段数量单列索引多列索引 3、最佳实践3.1、索引覆盖3.2、回表操作3.3、最左匹配原则3.4、索引下推 1、索引介绍 对于MySQL数据库来说…

笔试题:小红的循环小数 数论 欧拉 快速幂 小费马定理

小红的循环小数 众所周知&#xff0c;所有的无限循环小数都可以写成分数的形式 小红想让你判断循环节长度为k的无限循环小数的分母是否可能是p。你能帮帮她吗&#xff1f; 共有q次询问。 输入描述 第一行输入一个正整数 q q q&#xff0c;代表询问次数。 接下来的 q q q行&…

Tensorflow笔记(二):常用函数2、激活函数、优化器等、神经网络模型实现(商品销量预测)

import tensorflow as tf import numpy as np from tqdm import tqdm# ----------------------------- tensor常用函数2 ----------------------------------- a tf.constant([1, 2, 3, 1, 2]) b tf.constant([0, 1, 3, 4, 5]) c tf.where(tf.greater(a, b), a, b) # 若a&g…

计算机毕业设计-springboot+vue前后端分离电竞社交平台管理系统部分成果分享

4.5系统结构设计 本系统使用的角色主要有系统管理员、顾客、接单员&#xff0c;本系统为后台管理系统&#xff0c;游客用户可以经过账号注册&#xff0c;管理员审核通过后&#xff0c;用账号密码登录系统&#xff0c;查看后台首页&#xff0c;模块管理&#xff08;顾客信息&am…

mysql重构

力扣题目链接 列转行 SELECT product_id, store1 store, store1 price FROM products WHERE store1 IS NOT NULL UNION SELECT product_id, store2 store, store2 price FROM products WHERE store2 IS NOT NULL UNION SELECT product_id, store3 store, store3 price FROM p…