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

一、使用

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);
      });
    },
//.....