用el-form来实现
时间: 2023-07-12 14:38:27 浏览: 38
可以使用Element UI中的`el-form`来实现表单项的显示和隐藏。具体的实现方法如下:
1. 在`el-form`中添加一个`el-select`表单项,用于选择type的值。
2. 在`el-form`中添加一个`el-input`表单项,用于输入redis的值。
3. 给`el-select`表单项添加一个`@change`事件监听器,当其值改变时触发事件。
4. 在事件处理程序中,根据`el-select`表单项的值来判断是否显示`el-input`表单项,如果为2,则将其`v-if`属性设置为`true`,否则将其设置为`false`。
以下是具体的代码实现:
```html
<template>
<el-form>
<el-form-item label="Type">
<el-select v-model="type" @change="handleChange">
<el-option label="Option 1" value="1"></el-option>
<el-option label="Option 2" value="2"></el-option>
<el-option label="Option 3" value="3"></el-option>
</el-select>
</el-form-item>
<el-form-item label="Redis" v-if="type === '2'">
<el-input v-model="redis"></el-input>
</el-form-item>
</el-form>
</template>
<script>
export default {
data() {
return {
type: '',
redis: ''
}
},
methods: {
handleChange() {
if (this.type === '2') {
this.$set(this, 'redis', '');
}
}
}
}
</script>
```
在上面的代码中,我们首先在`el-form`中添加了一个`el-select`表单项和一个`el-input`表单项,分别用于选择type的值和输入redis的值。然后给`el-select`表单项添加了一个`@change`事件监听器,当其值改变时,事件处理程序会根据其值来判断是否显示`el-input`表单项,如果值为2,则将其`v-if`属性设置为`true`,否则将其设置为`false`,从而实现了表单项的显示与隐藏。
同时,为了避免在切换选项时出现上一个选项的数据残留,我们在`handleChange`方法中对redis进行了初始化。