博客

效果图





表单，加入 移入移出事件 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)
    },