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