el-input校验利率输入框

需求描述

在表单中使用利率，要求输入值在0-100之间，输入框后显示 % ，传递给后端的是能是数字。

问题解决

• 样式

// scss
.suf-after {
	display: block;
	width: 25px;
	height: 35px;
	text-align: center;

	position: absolute;
	top: 0;
	right: 0;
}

.suffix-pre {
	position: relative;
	&::after {
		content: '%';
		@extend .suf-after;
	}
}

.suffix-pre.is-disabled {
	&::after {
		color: #C0C4CC;
	}
}

• vue

<el-form-item label="利率" prop="rate">
    <el-input class="suffix-pre" v-model="form1.rate" />
</el-form-item>

• 校验规则

// 注意规则中的 transform 方法，可以在验证之前转换值，能解决在table中的form输入了数字依然无法通过校验的问题。
rate: [
        {required: true, message: '必输项不能为空', trigger: 'blur'},
        {type: 'number', min: 0, max: 100, message: '必须是0-100之间的数字', transform(v){return Number(v)}, trigger: 'blur'}
],

• 校验方法

this.$refs.form1.validate()
  .then(_ => {
     console.log('adddddd')
  })
  .catch(({ errors, fields }) => {
     console.log(errors, fields)
  })