1、基本使用
复制下面的代码：
<!-- 选择查询类型 -->
<el-dropdown trigger="click"><span class="el-dropdown-link"><span style="width:60px;color:#404040">查询类型</span><el-icon class="el-icon--right" color="black"><arrow-down /></el-icon></span><!-- 下拉选项（element-plus提供的插槽） --><template #dropdown><el-dropdown-menu><el-dropdown-item>姓名</el-dropdown-item><el-dropdown-item>病历号</el-dropdown-item></el-dropdown-menu></template>
</el-dropdown>/* 导入element-plus图标 */
import { ArrowDown } from '@element-plus/icons-vue'/* 下拉菜单的样式 */
.el-dropdown-link:focus {outline: none;/* 鼠标悬停、聚焦时，去掉外边线 */
}.el-dropdown-link {cursor: pointer;color: #f3f3f3;font-size: 15px;display: flex;align-items: center;
}展示效果：
2、练习
练习题目：请根据所选择的下拉菜单的类型，展示不同的输入框。
实现步骤：
①给每个项，绑定一个command值，并给el-dropdown组件添加@command事件。
②编写@command="changeQueryType"事件，该函数可以接收一个参数，就是所选项的command值，如下：
//点击查询类型下拉列表，选中某个类型时触发的事件@change="changeQueryType" const changeQueryType = (value) => {JSON.stringify(value);//形参value就是所选择项的command值}展示效果：
③定义一个值，用来表示查询类型
//查询类型 const queryType = ref("name");//页面初始化的时候，令查询类型为name④在@command="changeQueryType"事件中，令自定义变量queryType的值为所选项的command值。
⑤定义两个输入框，并根据自定义变量queryType的值，使用v-if语句渲染它们。
<el-input v-if="queryType == 'name'" :size="large" clearable style="width: 220px; height:40px; " placeholder="请输入患者姓名进行查询"><template #prefix><el-icon class="el-input__icon"><QuestionFilled /></el-icon></template> </el-input> <el-input v-if="queryType == 'number'" :size="large" clearable style="width: 220px; height:40px; " placeholder="请输入患者病历号进行查询"><template #prefix><el-icon class="el-input__icon"><QuestionFilled /></el-icon></template> </el-input>即：当queryType的值是name时，就显示【根据姓名查询的搜索框】；当queryType的值是number时，就显示【根据病历号查询的搜索框】。
效果展示：
当我们选择查询类型为“姓名”时，就显示姓名输入框。
当我们选择查询类型为“病历号”时，就显示病历号输入框。