vue+element项目实现如下右边输入框紧挨左边输入框或者下拉框的效果

最新推荐文章于 2024-06-24 17:58:39 发布
最新推荐文章于 2024-06-24 17:58:39 发布
阅读量2.8k 收藏 2
点赞数
分类专栏： 技术博客 网页前端 文章标签： vue.js javascript elementui
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lichunjiang_/article/details/122720491
版权
  • 如图
    在这里插入图片描述
  • 实现
    只需要把右边的el-form-item 加上label-width="0px"即可，成
<el-col :span="15">
   <el-form-item label="" prop="code" label="" label-width="0px">
      <el-input v-model="form.code" placeholder="请输入号码"></el-input>
   </el-form-item>
</el-col>
琦玉和龙卷
关注
专栏目录
232：vue+openlayers选择左右两部分的地图，不重复，横向卷帘
大剑师兰特的GIS世界
04-11 1753
本示例演示如何在vue+openlayers项目中自定义js实现横向卷帘。这个示例中从左右两个选择框中来选择不同的地图，做了不重复的处理，即同一个数组，两部分根据选择后的状态做disabled处理，避免重复选择。
ElementUI+Vue的下拉框联动右边输入框自己敲
有时间可以指导毕业设计，可以私聊我。一个热爱编程的smallCuteMonkey，可以私信我
03-04 1990
文章目录 需要有下拉框和输入框 代码如下： <template slot-scope="scope"> <el-select clearable v-model="dataList2[scope.$index].rulcon" @change="changeByCustom" style="width: 140px;" >
el-form-item的label设置两端对齐
青莳的博客
06-24 1039
el-form-item的label设置两端对齐
vue制作一个聚焦文字移动到输入框左侧，失焦回到输入框内部的动画需求（SEAN的日志）
weixin_46167829的博客
06-10 363
html部分 <a-input v-model="params.username" placeholder @focus="focus1" @blur="blur1" ref="input1" /> <span :class="{ title: true, focusFlag1: focusFlag1 }">用户名</span> js部分 focus1(event) { this.focusFlag1 = t
vue实现左右多选框
sinat_38728160的博客
11-27 2633
html部分代码 <fieldset> <table class="table table-bordered dchannel-table"> <tbody> <tr> <td><span style="width: 50%;">搜索结果：接口名字(接口包名)</span>&...
将光标定位于输入框最右侧的实现方式
aizhanqian5077的博客
03-29 404
这个方法setCursorPosition需要使用两个原生API setSelectionRangecreateTextRange <html> <head> <title></title> <script src="./js/jquery-2.2.2.min.j...
vue+Element中table表格实现可编辑（select下拉框）
10-15
在使用Vue.js框架结合Element UI库时，实现表格中某列数据可编辑且为下拉框选项是一个常见需求。本文详细介绍了如何在Vue+Element的table表格中实现可编辑功能，特别是在单元格内通过select下拉框形式选择数据，并...
基于vue + element UI 的后台管理系统模板
09-12
Element UI 是一套基于 Vue.js 的开源UI组件库，由饿了么团队开发，提供了一系列完善的企业级组件，如表格、按钮、提示、下拉框、导航、弹窗等。Element UI的设计理念是“简单、实用”，它的组件样式统一且易于定制...
vue+element+input+提取选中文字
05-12
textarea中有大量数据，获得鼠标选中的部分数据
vue+Element实现搜索关键字高亮功能
10-16
在介绍如何使用Vue.js结合Element UI框架实现搜索关键字高亮显示之前，我们首先要了解几个基础知识点。 Vue.js是一个用于构建用户界面的渐进式JavaScript框架。它将数据和视图分离，通过数据的双向绑定来驱动视图的...
Vue+Element UI 树形控件整合下拉功能菜单（tree + dropdown +input）
10-14
在本文中，我们将探讨如何在Vue.js应用程序中结合Element UI库创建一个具有下拉功能菜单的树形控件，这个功能通常用于增强用户界面的交互性。Vue和Element UI的组合提供了丰富的UI组件，使得开发人员能够快速构建...
带选择框树
06-21
带选择框树
修改ElementUI默认表单项el-form-item间距
热门推荐
深海微澜
02-23 2万+
ElementUI的表单组建el-form的表单项之间的间距怎么改？ 解决：表单组件之间的间距可以在CSS中设置。 .el-form-item{ margin-bottom: 0px; } 示例： 修改后:
关于Input输入框添加下拉框（可输入、可选）
weixin_45078922的博客
12-08 1万+
昨天，UI突然发过来一个设计图，可输入文本框加上可选择的下拉框，原本以为很简单的事情却在我翻看组件库的一次次崩溃中变得复杂。 iview组件库中的Select框确实很像啊，但是，不能输入啊！！！！！！崩溃中。。。。 突发奇想，组件都是原生代码编写的，为啥我不能基于vue2编写一个自己的组件呢，由于代码篇幅较大，所以我选择在components中创建新的vue文件（优点：够清晰；缺点：涉及父子组件的传值问题） 既然要自己写组件，那么首先就是样式问题，一个大的div中嵌套一个Input标...
input框，下拉框加icon
m0_46341331的博客
08-09 339
//下拉框加icon <el-form-item label="机构类型"> <el-select class="search_Type" style="width: 200px" v-model="searchType2" placeholder="请输入机构类型" > <el-option .
Vue--表单输入绑定
qq_45954420的博客
03-08 1767
一、基础用法 你可以用 v-model 指令在表单 <input>、<textarea> 及 <select> 元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。 1.注意 v-model 会忽略所有表单元素的 value、checked、selected attribute 的初始值而总是将 Vue 实例的数据作为数据来源。你应该通过 JavaScript 在组件的 data 选项中声明初始值。 v-model 在内部为不同的输入元素使用不同
【转】input输入框的各种样式
weixin_30821731的博客
05-05 9917
输入框景背景透明：<input style="background:transparent;border:1px solid #ffffff"> 鼠标划过输入框，输入框背景色变色：<INPUT value="Type here" NAME="user_pass" TYPE="text" SIZE="29" onmouseover="this.style.borderColor=...
vue实战开发006:制作input输入及下拉选择搜索框
kevinfan的博客
01-30 9024
       今天做的是实现点击input框时弹出下拉选择菜单，点击下拉列表中要搜索将数据赋值给input框，然后再加个清楚按钮，当input框没有数据的时候隐藏，当有数据输入的时候就显示改功能,下面是功能演示。       首先我们先来设计input框加搜索按钮，这里我们直接用字体图标来实现， 我引用了bootstrap和element-ui的字体图标，所以直接在i标签中加入对应的图标样式...
移动端input框设置从右侧输入，光标在右侧！！
Kiey_Lee的博客
05-09 895
设置input框鼠标光标位置
vue+element+在输入框末端加单位下拉
最新发布
09-14
在Vue.js中结合Element UI库，实现输入框（通常指`el-input`组件）后面带有一个单位选择下拉（如`el-select`），你可以按照以下步骤操作： 1. 首先，在你的项目中确保已安装了Element UI，如果没有，可以使用npm或yarn安装： ```bash npm install element-ui --save # 或者 yarn add element-ui ``` 2. 引入需要的组件： ```javascript import { ElInput, ElSelect } from 'element-ui'; ``` 3. 创建一个自定义的输入框组件，例如`UnitInput.vue`: ```html <template> <div> <el-input v-model="inputValue" placeholder="请输入数值"></el-input> <el-select v-model="unit" @change="handleUnitChange"> <el-option v-for="unitItem in units" :key="unitItem.value" :label="unitItem.label" :value="unitItem.value" ></el-option> </el-select> </div> </template> <script> export default { data() { return { inputValue: '', unit: '', // 单位默认值 units: [ { value: 'kg', label: '千克' }, { value: 'g', label: '克' }, // 添加更多单位选项... ], }; }, methods: { handleUnitChange(unit) { this.inputValue = parseFloat(this.inputValue); // 如果输入的是数字，转换并保留单位 }, }, }; </script> ``` 4. 在主应用组件或其他需要的地方，使用这个`UnitInput`组件。 在上面的例子中，我们创建了一个包含输入框和单位下拉的选择器。当用户从下拉框选择新单位时，`handleUnitChange`方法会处理输入值（假设之前是数字）并自动添加选定的单位。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值