当前位置：首页 > news >正文

element-plus中Dropdown下拉菜单组件的使用

news 来源：原创 2025/5/29 21:40:43

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时，就显示【根据病历号查询的搜索框】。