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

Elementui的el-dropdown组件使用与案例

news 来源：原创 2024/9/29 11:34:27

一、使用

trigger 属性用于设置下拉菜单的触发方式，可以是 click（点击触发）或 hover（悬停触发）。
command 属性用于在 el-dropdown-item 上设置命令值。当用户点击某个菜单项时，会触发 command 事件，并将 command 的值作为参数传递给事件处理函数。
在组件的方法中，你可以定义一个名为 handleCommand 的函数来处理 command 事件。这个函数将接收一个参数（即被选中的菜单项的 command 值），并执行相应的操作。

使用了 slot="dropdown" 属性来指定下拉菜单的内容应该插入到哪个插槽中。

<template>  <div>  <el-dropdown @command="handleCommand(command)" trigger="click">  <span class="el-dropdown-link">  下拉菜单<i class="el-icon-arrow-down el-icon--right"></i>  </span>  <el-dropdown-menu slot="dropdown">  <el-dropdown-item command="1">选项1</el-dropdown-item>  <el-dropdown-item command="2">选项2</el-dropdown-item>  <el-dropdown-item command="3" disabled>选项3（禁用）</el-dropdown-item>  <el-dropdown-item divided>选项4</el-dropdown-item>  </el-dropdown-menu>  </el-dropdown>  </div>  
</template>  <script>  
export default {  methods: {  handleCommand(command) {  this.$message('你选择了 ' + command); //可在这里发送请求与后端交互...},  },  
};  
</script>  <style scoped>  
/* 这里可以添加你的样式 */  
</style>

二、案例

实现表格中下拉选框选择并改变数据。当在表格中使用原始下拉选框，是不美观的，我们就可以使用el-dropdown组件。部分代码如下：

界面：

<el-table-column label="账号属性" prop="fundAccountAttribute"><template slot-scope="scope"><el-dropdown @command="openAccount2(scope.row, $event)"><div><span v-if="scope.row.fundAccountAttribute == '0'">作案身份</span><span v-else-if="scope.row.fundAccountAttribute == '1'">个人生活身份</span><i class="el-icon-edit" id="icon"></i></div><el-dropdown-menu slot="dropdown"><el-dropdown-item command="0">作案身份</el-dropdown-item><el-dropdown-item command="1">个人生活身份</el-dropdown-item></el-dropdown-menu></el-dropdown></template>
</el-table-column>

js:

openAccount2(row,command){console.log("修改资金信息属性",row);let data = {fundBank: row.fundBank, //归属机构fundAccountNumber: row.fundAccountNumber, //支付账号fundAccountType: row.fundAccountType, //账号类型fundAccountAttribute: command, //账号属性suspectId: row.suspectId,id:row.id};detailFund(data).then((res) => {console.log("修改资金信息属性", res);if (res.data.code == 0) {this.getFundInfo();this.$message({message: "修改属性成功",type: "success",});}});
},//请求getFundInfo() {getFundInfo({ suspectId: this.row.id }).then((res) => {this.fundInfo = res.data.data;console.log("资金信息", res.data.data);});},
//.....