vue在input框后面添加单位

已于 2024-06-03 21:30:05 修改
阅读量2.8k 收藏 8
点赞数 1
分类专栏： vue 文章标签： vue.js javascript elementui
于 2023-03-13 16:38:22 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_22905801/article/details/129497889
版权 
<el-row >

        <el-col style="width: 48%">
          <el-form-item label="大米" prop="screenrow"  >

              <el-input v-model="form.screenrow" placeholder="请输入重量" >
                <i slot="suffix" style="font-style:normal;margin-right: 10px; line-height: 30px; color: #1e1e1e">KG</i>
              </el-input>


          </el-form-item>


        </el-col>
        <el-col style="width: 48%; ">

          <el-form-item label="体积" prop="screencol"  >

              <el-input v-model="form.screencol" placeholder="请输入体积" style="margin-left: 15px">
                <i slot="suffix" style="font-style:normal;margin-right: 10px; line-height: 30px; color: #1e1e1e">m³</i>
              </el-input>

          </el-form-item>
        </el-col>
        </el-row>

951e892bc4eb473f9519862ec7a8f2a1.png

 

 

彦菘
关注
  • 1
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue组件系列之TagsInput详解
10-15
为了支持鼠标点击删除标签，我们可以在每个标签按钮后面添加一个删除图标，并添加一个删除方法： ```html (tag, index) in tags' :key='index' @click='delTag(index)'>{{tag}} <span>x</span></button> ``` ```...
详解Vue 动态添加模板的几种方法
08-30
在 Vue 中，动态添加模板是指在运行时动态生成模板的需求，例如让用户自定义组件模板，或者设置组件的布局。在本文中，我们将介绍几种实现 Vue 动态添加模板的方法。 首先，我们需要了解 Vue 的模板渲染机制。在 ...
vue element-ui实现input输入框金额数字添加千分位
11-27
在util.js中定义方法 包含金额添加过滤千分位，验证金额格式等 const MoneyTest = /((^[1-9]\d*)|^0)(\.\d{0,2}){0,1}$/; // 金额添加千分位 const comdify = function (n) { if(!n) return n; let str = n.split('.'); let re = /\d{1,3}(?=(\d{3})+$)/g; let n1 = str[0].replace(re, "$&,"); return str.length > 1 && str[1] ? `${n1}.${str[
如何在input框中加文字（单位）
热门推荐
梁小茹的博客
12-15 1万+
看图 prefix:前面加 suffix：后面加 <el-form-item label="车辆载重" :label-width="formLabelWidth"> <el-input v-model="form.name" placeholder="请输入" autocomplete="off" > <
el-input-number添加单位
m0_62799628的博客
06-06 228
【代码】el-input-number添加单位。
el-input输入框加单位（元）
afdgdf的博客
01-17 1374
el-input输入框后缀加单位‘元’
vue+element+在输入框末端加单位
weixin_43961652的博客
12-13 3935
要求：写一个体积，加上m³的单位 elementUI文档里只写了带图标的，没有自定义单位，其实也可以用suffix插槽来实现，但是放进来的位置是顶着右上角，而且是斜体，所以需要用样式来修改一下 代码如下 <el-col :span="8"> 总体积 <el-input v-model="totalCBM" type="input" :disabled="true" class="total-input" style="width: 80%;">
el-input 后面加单位
cmmboy1990的博客
12-27 4544
解决： <el-input placeholder="请输入占地面积" v-model="dataFormList.area"> <i slot="suffix" class="dw">亩</i> </el-input> .dw{ font-style:normal; color: #000000; font-weight: bold; line-height: 45px; } 效果： ...
el-input-number 如何添加单位
前端笔记——放弃很容易,但坚持一定很酷
06-13 4741
如何在 el-input-number 的文本框后面添加单位
el-input后面加个单位位置
m0_50080847的博客
04-26 225
<el-form-item label="推广自购比例：" size="mini" > <el-input v-model="addlist.bili" size="mini" style="width: 200px;"><template slot="append">%</template></el-input> &l...
点击添加input可删除.zip
09-10
对于删除功能，如果每个input都有一个对应的删除按钮，可以在每个input后面创建一个删除按钮，然后为这些按钮添加事件监听器。例如： ```javascript function addRemoveButton(input) { var removeBtn = ...
一个增加表单input的例子/表单框按需求点击增加
04-21
此外，为了提高用户体验，还可以考虑使用AJAX异步提交表单，以便在用户添加完所有姓名后一次性发送所有数据，而不是每次添加就提交一次。这需要结合服务器端语言（如PHP、Node.js等）进行处理。 总结来说，这个例子...
Element Input输入框的使用方法
10-15
- 在输入框后面插入内容（append）： ```html <el-input placeholder="请输入内容" v-model="input4"> <template slot="append">.com</template> </el-input> ``` - 结合 `el-select` 组件： ```html <el-input ...
el-input后面加单位，el-table每列加单位
weixin_44807017的博客
12-17 4659
el-input后面加单位，el-table每列加单位 el-input后面加单位 <el-input v-model="editForm.length"> <i slot="suffix" style="font-style:normal;margin-right: 10px;">cm</i> </el-input> el-table每列加单位 <el-table-column align="center" label="楼栋号"&gt
vue3+Element Plus项目中给el-input-number组件增加数字单位显示
TM
12-15 819
【代码】vue3+Element Plus项目中给el-input-number组件增加数字单位显示。
el-input-number 添加单位
weixin_45609659的博客
09-14 1523
el-input-number添加单位
vue页面中想在input框用户输入的参数后加单位的方法
qq_43193513的博客
08-25 931
【代码】vue页面中想在input框用户输入的参数后加单位的方法。
基于Vue3+ElementPlus的数字范围输入框组件
gsssshuai的博客
10-25 2524
基于vue3+elementPlus的数字范围输入框组件
el-input后面加文字
Chuk
05-29 1717
【代码】el-input后面加文字。
Django+vue自动化测试平台（28）-- ADB获取设备信息
最新发布
测试小老弟的博客
07-17 418
adb的全称为Android Debug Bridge，就是起到调试桥的作用。通过adb可以在Eclipse中通过DDMS来调试Android程序，说白了就是调试工具。adb的工作方式比较特殊，采用监听Socket TCP 5554等端口的方式让IDE和Qemu通讯，默认情况下adb会daemon相关的网络端口，所以当我们运行Eclipse时adb进程就会自动运行。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值