element-ui 表格+Dropdown下拉菜单 command方法(获取某行数据)

1、data自定义数据

```javascript
  data() {
    
    
    return {
    
    
      dropdownList: [
        {
    
    
          label: "查看", // 菜单操作名称
          disabled: false, // 是否禁用
          icon: "el-icon-search", // 菜单图标
          handerClick: "lookFn", // 点击事件函数名，对应操作的函数名
        },
        {
    
    
          label: "编辑",
          disabled: false,
          icon: "el-icon-edit",
          handerClick: "editFn",
        },
        {
    
    
          label: "删除",
          disabled: true,
          icon: "el-icon-document-delete",
          handerClick: "deletedFn",
        },
      ],
    };
  },

2、html代码

<el-table-column label="操作" align="center" width="150" class-name="operate">
    <template slot-scope="{ row }">
        <!-- <el-dropdown @command="(command) => handleCommand(command, row)"> -->
        <el-dropdown @command="handleCommand($event, row)">
            <el-button type="text"> 操作<i class="el-icon-arrow-down el-icon--right"></i> </el-button>
            <el-dropdown-menu slot="dropdown">
                <el-dropdown-item v-for="(item, index) in dropdownList" :key="index" :disabled="item.disabled" :icon="item.icon" :command="item.handerClick">{
    
    {
    
     item.label }} </el-dropdown-item>
            </el-dropdown-menu>
        </el-dropdown>
    </template>
 </el-table-column>

3、methods 下拉菜单对应的事件方法

methods:{
    
    
    // 下拉菜单点击事件 ————— 方法1
    handleCommand(event, item) {
    
    
      console.log(event, item);
      this[event](item.id);
    },
    // 下拉菜单点击事件 ————— 方法2
    handleCommand(command,row) {
    
    
    //拿到当行数据和command进行判断
      switch (command) {
    
    
        case "lookFn":
          this.lookFn(row.id)
          break;
        case "editFn":
          this.editFn(row.id);
          break;
        case "deletedFn":
          this.deletedFn(row.id);//拿到当行数据的id进行删除操作
      }
    },
    // 查看操作
    lookFn(id) {
    
    
      console.log('查看操作', id);
    },
    // 编辑操作
    editFn(id) {
    
    
       console.log('编辑操作', id);
    },
    // 删除操作
    deletedFn(id) {
    
    
       console.log('删除操作', id);
    },
}