您现在的位置是:网站首页> 编程资料编程资料
vue中使用el-dropdown方式_vue.js_
2023-05-24
396人已围观
简介 vue中使用el-dropdown方式_vue.js_
vue 使用el-dropdown

点击【更多】弹出如下选项
使用el-dropdown
{ handleCommand(command, scope.$index, scope.row); } " > 更多 资料下载 复制 置顶 取消置顶 重命名 删除
/** * 更多 */ handleCommand(command, index, row) { console.log("command", command, row); //复制 if (command == "a") { Ajax( { method: "put", url: "/active/copy", params: { active_id: row.active_id }, }, (res) => { this.saveLoading = false; if (res.status_code === 200) { this.$message({ message: "复制成功", type: "success" }); // 复制成功回到第一页 this.pageInfo.currentPage = 1; this.getData(); } }, (err) => { this.saveLoading = false; } ); } //置顶 if (command == "b") { this.handleTop(row, 1); } //取消置顶 if (command == "c") { this.handleTop(row, 0); } // 重命名 if (command == "d") { this.renamePopUp = true; this.form = row; this.editPostUrl = 3; } //删除 if (command == "e") { this.handleDelete(index, row); } //资料下载 if (command == "f") { window.open(row.url_arr[0]); } }, /** * 置顶 */ handleTop(row, is_top) { this.loading = true; console.log(row.is_top); Ajax( { url: "/active/top", // 路径 method: "put", params: { active_id: row.active_id, is_top: is_top }, }, (res) => { this.loading = false; if (res.status_code === 200) { this.$message({ message: "操作成功", type: "success" }); this.getData(); } }, (err) => { this.loading = false; } ); }, /** * 删除 */ handleDelete(index, row) { this.$confirm("你是否确认删除这个活动?", "提示", { confirmButtonText: "确定", cancelButtonText: "取消", type: "error", }) .then(() => { this.loading = true; //删除 Ajax( { method: "delete", url: "/active", params: { active_id: row.active_id }, }, (res) => { this.loading = false; if (res.status_code === 200) { this.$message({ message: "删除活动成功", type: "success" }); this.getData(); } }, (err) => { this.loading = false; } ); }) .catch(() => { this.$message({ type: "info", message: "已取消删除" }); }); },vue el-dropdown点击事件
vue el-dropdown点击事件有个神坑,@click不起效,要在后面加 @click.native才能生效
如下
``` 打印 图片另存为 刷新
以上为个人经验,希望能给大家一个参考,也希望大家多多支持。
您可能感兴趣的文章:
相关内容
- Vue数据劫持详情介绍_vue.js_
- webpack4升级到webpack5的实战经验总结_javascript技巧_
- elementUI中el-dropdown的command实现传递多个参数_vue.js_
- js中yield参数应用示例深入理解_JavaScript_
- 手把手带你安装vue-cli并创建第一个vue-cli应用程序_vue.js_
- 实现一个Vue版Upload组件_vue.js_
- vue elementui二次封装el-table带插槽问题_vue.js_
- JS实现Tab栏切换的两种方式案例详解_javascript技巧_
- Axios+Spring Boot实现文件上传和下载_javascript技巧_
- vue.config.js完整配置教程_vue.js_
