使用element-ui + vue2实现下拉菜单（多选）对其他控件的显示和隐藏

实现下拉菜单控制其他组件的显示和隐藏

首先：加入这个语句 v-if="selectedOptions.includes('选项1')"

  <tempalte>
  <el-form-item label="选项1" prop="option1" v-if="selectedOptions.includes('选项1')">
        <el-input
          v-model="queryParams.operatorName"
          placeholder="请输入选项1"
          clearable
          @keyup.enter.native="handleQuery"
        />
   </el-form-item>
   </template>

其次 添加下拉菜单组件

 <el-row>
    <el-dropdown trigger="click" :hide-on-click="false" @command="handleCommand">
    <el-button type="primary" class="el-dropdown-link">
      下拉菜单<i class="el-icon-arrow-down el-icon--right"></i>
    </el-button>
    <el-dropdown-menu slot="dropdown">
      <el-dropdown-item  v-for="option in options" :key="option.value" :disabled="option.disabled" :command="option.label">
        <label>
          <input type="checkbox" v-model="selectedOptions" :value="option.value">
          {{ option.label }}
        </label>
      </el-dropdown-item>
    </el-dropdown-menu>
  </el-dropdown>
 </el-row>

在js中写

   <script>
   export default {
   data() {
    return {
   //下拉菜单中的数据
    options: [
        { label: '选项1', value: 'option1', disabled: false },
        { label: '选项2', value: 'option2', disabled: false },
        { label: '选项3', value: 'option3', disabled: false },
      ],
      selectedOptions:[] 
      }
      }
       
       methods: {
           //下拉菜单
         handleCommand(command) {
      // 根据选择的结果，更新选中的选项
      if (!this.selectedOptions.includes(command)) {
        this.selectedOptions.push(command);
      } else {
        this.selectedOptions = this.selectedOptions.filter(
          option => option !== command
        );
      }
    }
    }
   
  }
    
   </script>

在上述示例中，使用el-dropdown组件来创建一个下拉菜单，通过@command事件监听选择的结果。根据选择的结果，使用v-if指令来控制其他控件的显示和隐藏。selectedOptions数组用于保存选中的选项，通过handleCommand方法来更新该数组。