element下拉按钮事件

134 阅读 0 评论 89 点赞

我是靠谱客的博主文艺嚓茶，这篇文章主要介绍element下拉按钮事件，现在分享给大家，希望可以做个参考。

element实现下拉菜单出来按钮且每个按钮都有其相对应的事件，废话不多说、上代码

1、HTML 部分

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14

<el-table-column :label="操作" align="center" class-name="small-padding ">
<template slot-scope="{row}">
<el-dropdown @command="handleCommand(row,$event)">
<span class="el-dropdown-link">其他操作<i class="el-icon-arrow-down el-icon--right" /></span>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item command="handleUpdate">编辑</el-dropdown-item>
<el-dropdown-item v-if="row.status==-1" command="handleEnabled">启用</el-dropdown-item>
<el-dropdown-item v-if="row.status==1" command="handleDisabled">禁用</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</template>
</el-table-column>

2、Script 部分

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

//事件方法
handleCommand(row, command) {
switch (command) {
case "handleUpdate":
this.handleUpdate(row);
break;
case "handleEnabled":
this.handleEnabled(row);
break;
case "handleDisabled":
this.handleDisabled(row);
break;
}
},
//按钮事件方法....此处省略
handleUpdate() {},
handleEnabled() {},
handleDisabled() {},