在使用dropdown组件的时候,需要的参数可能很多,不仅仅是command一个参数。这就需要通过composeValue构造一个结构了。
<el-dropdown @command="handleCommand">
<el-dropdown-menu slot="dropdown">
<template v-for="item in items">
<el-dropdown-item v-for="it in item " :command="composeValue(it,scope.row)"/>
</template>
</el-dropdown-menu>
</el-dropdown>
//方法部分的处理
handleCommand(command) {
console.log(command)
},
composeValue(item, id) {
return {
button: item,
id: id
}
}
打印结果
table中
<el-table-column label="操作" width="250" fixed="right">
<template slot-scope="scope">
<el-button type="success" @click.stop="goPutin(scope.row)"
>编辑投放列表</el-button
>
<el-dropdown
@command="(command) => handleCommand(command, scope.row)"
>
<el-button type="primary"
>更多菜单<i class="el-icon-arrow-down el-icon--right"></i
></el-button>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item command="remake">备注</el-dropdown-item>
<el-dropdown-item command="edit">编辑产品</el-dropdown-item>
<el-dropdown-item command="changeSort">排序</el-dropdown-item>
<el-dropdown-item command="remove">删除</el-dropdown-item>
<el-dropdown-item command="overHz">{{
scope.row.productCooperation == 1 ? "终止合作" : "恢复合作"
}}</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</template>
</el-table-column>
<script>
// 更多操作触发
handleCommand(command, row) {
switch (command) {
case "remake":
this.remake(row);
break;
case "edit":
this.edit(row);
break;
case "changeSort":
this.changeSort(row);
break;
case "remove":
this.remove(row);
break;
case "overHz":
this.overHz(row);
break;
default:
break;
}
},
edit(row) {
this.$nextTick(() => {
this.productId = row.productId;
this.goodsType = "edit";
this.$refs.goodsAdd.dialogVisible = true;
});
},
</script>