element-UI dropdown 传多个参数
<el-tree :data="layersName" :props="defaultProps" node-key="id" :default-checked-keys="checked" show-checkbox
@check-change="handleCheckChange" draggable :allow-drop="allowDrop" @node-drop="handleDrop">
<div class="slot-content" slot-scope="{ node, data }">
<div class="desc">
<span>{{ node.label }}</span>
</div>
<div class="icon">
<el-tooltip class="item" content="缩放至此图层" :open-delay="1500" placement="top-start">
<i class="el-icon el-icon-zoom-in" @click="zoomHandle(node, data)"></i>
</el-tooltip>
<el-tooltip class="item" content="删除此图层" :open-delay="1500" placement="top-start">
<i class="el-icon el-icon-delete" @click="() => remove(node, data)"></i>
</el-tooltip>
<el-dropdown @command="handleCommand" :show-timeout="500" size="mini">
<i class="el-icon el-icon-s-fold"></i>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item :command="beforeHandleCommand('a',node, data)" icon="el-icon-c-scale-to-original">查看属性表</el-dropdown-item>
<el-dropdown-item command="b">狮子头</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</div>
</div>
</el-tree>
handleCommand(command) {
switch (command.command) {
case "a":
this.show(command)
break;
case "b":
this.show(command)
break;
}
},
beforeHandleCommand(type,node, data){
return {type,node, data}
},
其实就是给command绑定一个回调函数,通过回调函数来实现传参。
分类:
前端 / Vue学习
, 前端
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 全程不用写代码,我用AI程序员写了一个飞机大战
· DeepSeek 开源周回顾「GitHub 热点速览」
· 记一次.NET内存居高不下排查解决与启示
· 物流快递公司核心技术能力-地址解析分单基础技术分享
· .NET 10首个预览版发布:重大改进与新特性概览!