el-input-number中添加suffix

el-input很容易实现下图样式：

但是el-input-number现在还不行，因此需要我们自己手动添加。添加后效果如下：

实现步骤：

给el-input-number添加id，例如rebateInput

<el-form-item label="Rebate比率:"  > <el-input-number   :precision="3" size="mini" v-model="rebate_rate"  controls-position="right" id="rebateInput"></el-input-number>
</el-form-item>

创建span元素，添加样式、class名，再把span元素追加到el-input-numbe中

        const span = document.createElement('span');const innerspan = document.createElement('span');const textspan = document.createElement('span'); span.setAttribute("class","el-input__suffix");span.setAttribute("style","right:36px");innerspan.setAttribute("class","el-input__suffix-inner");span.append(innerspan)innerspan.append(textspan)textspan.append('%')this.$nextTick(() =>{document.getElementById('rebateInput').lastElementChild.prepend(span);console.log(document.getElementById("rebateInput"),'document.getElementById');})

生成的元素如下：

el-input-number中添加suffix相关推荐

使用JavaScript在input标签中添加readonly属性
JavaScript如何将readonly属性添加到input标签?下面本篇文章就来给大家介绍一下使用JavaScript将readonly属性添加到input标签的方法,希望对大家有所帮助. 在Ja ...
在input 标签中添加 a标签跳转链接
<input onclick="javascript: top.location.href = '@chatOnline'" type="button" ...
微信小程序input框中加入小图标的实现方法
最近入坑小程序,要求在小程序的输入框中展示一个小图标,页面如下: 然后按照,html页面中的做法,在input框中添加了background-image属性,出乎意料的事,小程序报了下边这样一个错误: ...
小程序input框中加入小图标
最近入坑小程序,要求在小程序的输入框中展示一个小图标,页面如下: 然后按照,html页面中的做法,在input框中添加了background-image属性,出乎意料的事,小程序报了下边这样一个错误: ...
【python】定义一个Person类，它包含数据成员age, name和gender。从Person中派生一个类Employee,在新类中添加一个数据成员，存储个人的number.等等
# 定义一个Person类,它包含数据成员age, name和gender. # a. 从Person中派生一个类Employee,在新类中添加一个数据成员,存储个人的number. # 再从Empl ...
MFC对话框程序中添加工具栏及工具栏上的Button响应UPDATE_COMMAND_UI消息
对话框中添加工具栏及工具栏上的Button响应UPDATE_COMMAND_UI消息在对话框程序中添加工具栏其实很简单,网上能找到很多的例子.一般的步骤就是:1.在资源中添加工具栏资源:2.在对话 ...
jsp实现仿QQ空间新建多个相册名称，向相册中添加照片
工具:Eclipse,Oracle,smartupload.jar:语言:jsp,Java:数据存储:Oracle. 实现功能介绍: 主要是新建相册,可以建多个相册,在相册中添加多张照片,删除照片,删 ...
jsf用于页面判断的标签_JSF –在JSF视图页面中添加标签，图像，按钮和文本字段
jsf用于页面判断的标签 There are various UI components that JSF framework includes by default. Let us see some ...
在caffe 中添加Crowd counting 数据层
#目录 [TOC] 一.简介 Crowd counting一般以人群图像作为输入,网络回归该图像对应的密度图.以往做法是先在matlab中根据图像的label(人头位置)生成密度图,然后将输入图像及密 ...
python dataframe增加一行_python - 在pandas.DataFrame中添加一行
python - 在pandas.DataFrame中添加一行据我所知,pandas旨在加载完全填充的DataFrame,但我需要创建一个空的DataFrame,然后逐个添加行.做这个的最好方式是什 ...

el-input-number中添加suffix

el-input-number中添加suffix相关推荐

最新文章

热门文章