vue element-ui组件 el-tree 树菜单 鼠标滑过mouseenter,mouseleave移入移出节点,显示操作按钮 新增,删除等
效果图表单,加入 移入移出事件 mouseenter,mouseleave,用v-show 定义显示<el-treeclass="filter-tree tree"ref="tree"highlight-current:expand-on-click-node = "false":data="categories"
·
效果图
表单,加入 移入移出事件 mouseenter,mouseleave,用v-show 定义显示
<el-tree
class="filter-tree tree"
ref="tree"
highlight-current
:expand-on-click-node = "false"
:data="categories"
:filter-node-method="filterCategory"
:props="defaultCategory"
@node-click="selectCategory"
node-key="categoryId"
default-expand-all>
<span class="custom-tree-node" slot-scope="{ node, data }" @mouseenter="mouseenter(data)" @mouseleave="mouseleave(data)">
<span>{{ node.label }}</span>
<span class="fr">
<el-button v-show="data.show" type="text" size="mini" @click="() => add(data)">新增</el-button>
<el-button v-show="data.show" type="text" size="mini" class="fontRed" v-if="data.isSys !==1" @click="() => del(node, data)">删除</el-button>
</span>
</span>
</el-tree>
方法
// 树节点鼠标移入移出
mouseenter(data){
this.$set(data, 'show', true)
},
mouseleave(data){
this.$set(data, 'show', false)
},
更多推荐
已为社区贡献6条内容
所有评论(0)