Vue.js 动态显示/隐藏 el-select 和 el-input 控件 - 根据下拉框选择

Vue.js 动态显示/隐藏 el-select 和 el-input 控件 - 根据下拉框选择

本文将介绍如何在 Vue.js 中使用 el-select 组件实现根据下拉框选项选择，动态显示或隐藏其他 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. 处理 change 事件

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

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

通过以上步骤，您就可以轻松实现根据下拉框选项选择，动态显示或隐藏其他控件的功能。