el-input只允许输入数字和保留两位小数，不足自动补零

<template>
  <div>
  	<el-form :model="traditionDetails" ref="traditionDetails" :rules="rules" style="margin-top: 50px;">
		<el-row>
		  <el-col :span="8">
			<el-form-item label="已支付费用:" prop="paymentPrice">
			  <el-input v-model="traditionDetails.paymentPrice" oninput="value=value.replace(/[^0-9.]/g,'')">
				<template slot="append">元</template>
			  </el-input>
			</el-form-item>
		  </el-col>
		  <el-col :span="8">
			<el-form-item label="未支付费用:" prop="orderPrice">
			  <el-input v-model="traditionDetails.orderPrice" oninput="value=value.replace(/[^0-9.]/g,'')">
				<template slot="append">元</template>
			  </el-input>
			</el-form-item>
		  </el-col>
		  <el-col :span="8">
			<el-form-item label="累计支付金额:">
			  <el-input v-model="sum" disabled>
				<template slot="append">元</template>
			  </el-input>
			</el-form-item>
		  </el-col>
		</el-row>
		<el-button type="primary" @click="submit">确定</el-button>
	</el-form>
  </div>
</template>
<script type="text/javascript">
	 
	export default{
		data() {
			 const validatePaymentPrice = (rule,value,callback) =>{
				if(!value){
					callback(new Error('未支付费用不能为空'))
				 }else if(value.split('.').length > 2){
					callback(new Error('输入正确格式的未支付费用')) //防止输入多个小数点
				 }else{
					value = Math.round(value * Math.pow(10,2)) / Math.pow(10,2) //四舍五入
					value = Number(value).toFixed(2); //不足补位
					this.traditionDetails.paymentPrice = value;
					callback();
				}
			};
			
			const validateOrderPrice = (rule,value,callback) =>{
				if(!value){
					callback(new Error('未支付费用不能为空'))
				 }else if(value.split('.').length > 2){
					callback(new Error('输入正确格式的未支付费用')) //防止输入多个小数点
				 }else{
					value = Math.round(value * Math.pow(10,2)) / Math.pow(10,2) //四舍五入
					value = Number(value).toFixed(2); //不足补位
					this.traditionDetails.orderPrice = value;
					callback();
				}
			};
			return{
				traditionDetails:{},
				//表单校验
				rules: {
					paymentPrice: [
						{required:false,trigger:'blur',validator:validatePaymentPrice }
					],
					orderPrice: [
					  {required:false,trigger:'blur',validator:validateOrderPrice }
					],
				},
			}
		},
		computed:{
			sum(){
				if(this.traditionDetails.paymentPrice == undefined || this.traditionDetails.orderPrice == undefined || this.traditionDetails.paymentPrice == '' || this.traditionDetails.orderPrice == ''){
					return 0
				}else{
					return  (parseFloat(this.traditionDetails.paymentPrice)+parseFloat(this.traditionDetails.orderPrice)).toFixed(2) 
				}
			}
		},
		methods:{
			submit(){
				this.$refs['traditionDetails'].validate((valid) => {
					if (valid) {
					  alert('submit!');
					} else {
					  console.log('error submit!!');
					  return false;
					}
				});
			}
		}
	}
</script>
<style lang="less">

</style>