vue+element-ui Dropdown下拉菜单(获取某行数据)

Zheng_xinle

已于 2023-02-07 14:09:39 修改

阅读量2.6k

点赞数 6

分类专栏： vue element 文章标签： vue.js 前端 javascript

于 2022-12-30 15:16:39 首次发布

本文链接：https://blog.csdn.net/Zheng_xinle/article/details/128495861

版权

vue 同时被 2 个专栏收录

13 篇文章 0 订阅

订阅专栏

element

10 篇文章 1 订阅

订阅专栏

1、通过command方法直接传当前选中行的整个数据

html

<el-table>
  <el-table-column label="操作" width="100">
      <template slot-scope="scope">
         // @command="command=>方法名(command,你想传的其它参数)"
         <el-dropdown @command="(command)=>{handleCommand(command, scope.row)}">  // 主要这行代码
            <el-button class="search-btn" size="mini" type="primary">
              更多
              <i class="el-icon-arrow-down el-icon--right"></i>
            </el-button>
              <el-dropdown-menu slot="dropdown">
              <el-dropdown-item command="snmp-configure"
                >SNMP配置</el-dropdown-item>
              <el-dropdown-item command="export_excel"
                >导出</el-dropdown-item>
              <el-dropdown-item command="deldte" >删除</el-dropdown-item>
            </el-dropdown-menu>                                                
          </el-dropdown>
       </template>
   </el-table-column>
</el-table>

methods:{
    handleCommand(command,row) {
    //拿到当行数据和command进行判断
      switch (command) {
        case "snmp-configure":
          this.dialogTitleSnmp = "SNMP配置";
          this.dialogFormSNMP = true;
          break;
        case "export_excel":
          this.exportExcel();
          break;
        case "deldte":
          this.deleteSingleHandler(row.id);//拿到当行数据的id进行删除操作
      }
    },

}