el-input-number 添加单位

效果：

数字长的时候也不会遮挡后面单位

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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53

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;
    }
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40

参考文章：dom版 css版