实现效果:
具体的实现思路,在el-input-number,后面加一个div,外面包裹一个div,去除el-input-number的外边框等,最外层div增加边框
<div class="mo-input--number">
<el-input-number
v-model="value"
placeholder="请输入"
controls-position="right"
clearable>
</el-input-number>
<div class="define-append">万元</div>
</div>
style
<style lang="scss" scoped>
/* 自定义数字输入框append */
.mo-input--number {
border: 1px solid #DCDFE6;
width: 100%;
display: flex;
border-radius: 4px;
.el-input-number--mini{
flex: 1;
}
::v-deep .el-input__inner{
border: none!important;
}
}
.define-append{
width: 40px;
display: inline-block;
background: #F5F7FA;
padding: 0px 3px;
border-left: none;
height: 32px;
line-height: 32px;
color: #909399;
font-size: 12px;
text-align: center;
}
</style>