Vue之 根据下拉框选项选择的不同动态显示隐藏其他el-select 或el-input 控件

1. 首先，在Vue组件中定义一个data属性，用于存储下拉框选项的值。

data() {
  return {
    selectedValue: ''
  }
}

2. 在template中，使用el-select组件，绑定selectedValue属性，监听change事件，根据选项的值，决定是否显示其他控件。

<el-select v-model="selectedValue" @change="handleChange">
  <el-option label="选项1" value="option1"></el-option>
  <el-option label="选项2" value="option2"></el-option>
</el-select>

<el-select v-if="selectedValue === 'option1'">
  ...
</el-select>

<el-input v-if="selectedValue === 'option2'">
  ...
</el-input>

3. 在methods中定义handleChange方法，根据选项的值，更新selectedValue属性，触发template中的控件显示或隐藏。

methods: {
  handleChange(value) {
    this.selectedValue = value;
  }
}
``