两个el-input框,其中任意一个有值,则另一个为必填;其中任意一个没值,则另一个为非必填
时间: 2024-04-14 18:27:31 浏览: 143
详解element-ui设置下拉选择切换必填和非必填
你可以使用 `watch` 来监听其中一个 `el-input` 框的值的变化,并根据其值的情况来改变另一个 `el-input` 框的必填属性。
首先,在你的组件中,给两个 `el-input` 添加 `ref` 属性,用于在代码中引用它们。例如:
```vue
<template>
<div>
<el-input v-model="input1" ref="input1"></el-input>
<el-input v-model="input2" ref="input2"></el-input>
</div>
</template>
<script>
export default {
data() {
return {
input1: '',
input2: ''
};
},
mounted() {
this.$refs.input1.$refs.input.setAttribute('required', true);
this.$refs.input2.$refs.input.setAttribute('required', false);
},
watch: {
input1(newValue) {
if (newValue) {
this.$refs.input2.$refs.input.removeAttribute('required');
} else {
this.$refs.input2.$refs.input.setAttribute('required', true);
}
},
input2(newValue) {
if (newValue) {
this.$refs.input1.$refs.input.removeAttribute('required');
} else {
this.$refs.input1.$refs.input.setAttribute('required', true);
}
}
}
};
</script>
```
上述代码中,`mounted` 钩子函数用于设置初始的必填属性。`watch` 中的两个监听函数分别检查两个输入框的值的变化,根据情况来添加或移除必填属性。
这样,当其中一个输入框有值时,另一个输入框将变为非必填;当其中一个输入框没有值时,另一个输入框将变为必填。
阅读全文