Avue实现代码,表单中的两个输入框带有m²的后缀 ,分别为实测建筑面积和实测套内面积,都需要限制精确到两位小数,且限制用户输入的实测建筑面积必须大于实测套内面积,否则显示提示文字“实测建筑面积需大于实测套内面积”
时间: 2023-04-06 22:00:24 浏览: 156
您好,针对您的问题,可以通过以下代码实现:
```javascript
<template>
<div>
<el-form ref="form" :model="form" label-width="80px">
<el-form-item label="实测建筑面积">
<el-input v-model.number="form.area1" suffix="m²" @input="checkArea"></el-input>
</el-form-item>
<el-form-item label="实测套内面积">
<el-input v-model.number="form.area2" suffix="m²" @input="checkArea"></el-input>
</el-form-item>
<<el-form-item v-if="!isValid" label="">
<span style="color: red;">实测建筑面积需大于实测套内面积</span>
</el-form-item>
</el-form>
</div>
</template>
<script>
export default {
data() {
return {
form: {
area1: null,
area2: null
},
isValid: true
};
},
methods: {
checkArea() {
if (this.form.area1 <= this.form.area2) {
this.isValid = false;
} else {
this.isValid = true;
}
}
}
};
</script>
```
以上代码使用了 Element UI 的表单组件,通过 v-model 绑定数据,使用 suffix 属性添加 m² 后缀,使用 @input 监听输入框的输入事件,通过 checkArea 方法判断实测建筑面积是否大于实测套内面积,如果不满足条件,则显示提示文字。
阅读全文