<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绑定一个回调函数,通过回调函数来实现传参。
标签:node,dropdown,type,show,element,command,UI,data From: https://www.cnblogs.com/echohye/p/16631465.html