效果:
数字长的时候也不会遮挡后面单位
1、使用css,代码
<el-form-item
label="功率 "
>
<el-row>
<el-col :span="4">
<el-switch
v-model="formData.powerEnable"
:active-value="1"
:inactive-value="0"
/>
</el-col>
<el-col
:span="20"
v-show="formSysData.powerEnable"
>
<el-input-number v-model="formSysData.powerValue"
:controls="false"
:min="0"
:max="100"
:precision="0"
size="small"
class="my-el-input-number">
</el-input-number>
</el-col>
</el-row>
</el-form-item>
//样式
<style>
.my-el-input-number {
position: relative;
width: 100% !important;
.el-input {
width: 100% !important;
.el-input__inner {
padding-right: 35px;
}
}
}
.my-el-input-number::after {
color: #666666;
content: '%';
display: inline-block;
height: 20px;
line-height: 20px;
width: 20px;
text-align: center;
position: absolute;
right: 15px;
top: 50%;
transform: translateY(-50%);
}
</style>
2、添加dom元素
<el-input-number
id="rebateInput"
class="power-input-number"
v-model="formSysData.powerValue"
:controls="false"
:min="0"
:max="100"
:precision="0"
>
methods: {
addCompany() {
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('[W]')
document.getElementById('rebateInput') && document.getElementById('rebateInput').lastElementChild.prepend(span)
},
},
mounted() {
this.addCompany()
}
//样式
.power-input-number {
width: 100% !important;
.el-input {
width: 100% !important;
.el-input__inner {
padding-right: 35px;
}
}
}
参考文章:dom版 css版