Vue - elementUI 下拉菜单dropdown组件中command方法添加额外参数
在使用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>
臧伯克: 给你点赞
一只小阿焜: 如果上百万张图片的话,会不会造成一定的损耗呢? 而且你说的是webpack的使用方法,vue3+vite不支持require。 如果有后台的话,考虑是不是将图片转成base64编码更合适?(这点我也不是很清楚)
codeBoy_chen: 把需要动态导入的图片放入public文件夹中require返回的时候使用replace('/public', '')将'/public'去掉这样生产环境跟开发环境都能显示了
剑宇宝宝的小熊: 哥哥好棒哦
从不敲代码: 用第一个会报 landResource.vue:202 Uncaught (in promise) RangeError: Maximum call stack size exceeded at Array.forEach (<anonymous>) at transListDataToTreeData 怎么解决呢