Elementui tree实现鼠标移入显示新增按钮功能

Element tree组件鼠标移入显示新增等按钮功能的实现
实现的方法很简单，我开始使用v-show来实现，发现鼠标移入所有节点的按钮都显示了，很显然不可行，所以我就换了实现方式，使用css3来实现，思路也很简单，给父元素加上hover伪类，当鼠标移入父元素时给父元素下的按钮样式改成显示即可，话不多说直接上代码

1.首先是结构代码，完全复制element tree中自定义节点内容中的代码，在el-tree下面的第一个span加了一个类名show-hide，然后把按钮外层的span加样式让其隐藏

<template>
  <div class="custom-tree-container">
    <div class="block">
      <p>使用 scoped slot</p>
      <el-tree
        :data="data"
        show-checkbox
        node-key="id"
        default-expand-all
        :expand-on-click-node="false"
      >
        <span class="custom-tree-node show-hide" slot-scope="{ node, data }">
          <span>{{ node.label }}</span>
          <span style="display:none">
            <el-button type="text" size="mini" @click="() => append(data)">Append</el-button>
            <el-button type="text" size="mini" @click="() => remove(node, data)">Delete</el-button>
          </span>
        </span>
      </el-tree>
    </div>
  </div>
</template>
然后是js代码，没做任何修改和官方文档里的代码是一模一样的
<script>
let id = 1000;

export default {
  data () {
    const data = [{
      id: 1,
      label: '一级 1',
      children: [{
        id: 4,
        label: '二级 1-1',
        children: [{
          id: 9,
          label: '三级 1-1-1'
        }, {
          id: 10,
          label: '三级 1-1-2'
        }]
      }]
    }, {
      id: 2,
      label: '一级 2',
      children: [{
        id: 5,
        label: '二级 2-1'
      }, {
        id: 6,
        label: '二级 2-2'
      }]
    }, {
      id: 3,
      label: '一级 3',
      children: [{
        id: 7,
        label: '二级 3-1'
      }, {
        id: 8,
        label: '二级 3-2'
      }]
    }];
    return {
      data: JSON.parse(JSON.stringify(data))
    }
  },

  methods: {
    append (data) {
      const newChild = { id: id++, label: 'testtest', children: [] };
      if (!data.children) {
        this.$set(data, 'children', []);
      }
      data.children.push(newChild);
    },

    remove (node, data) {
      const parent = node.parent;
      const children = parent.data.children || parent.data;
      const index = children.findIndex(d => d.id === data.id);
      children.splice(index, 1);
    },
  }
};
</script>
最后是css代码，使用hover伪类和:nth-child() 选择器，在鼠标移入节点时给对应节点下的第二个子元素添加样式让按钮显示出来
<style lang="scss" scoped>
.custom-tree-node {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  padding-right: 8px;
}
.show-hide:hover :nth-child(2) {
  display: inline-block !important;
}
</style>
结束语：方法很简单，直接使用css3来实现的，希望能帮到大家，哪位大佬有更好的实现方法欢迎交流，一起成长。
————————————————
版权声明：本文为CSDN博主「共享IT」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/qq_27408917/article/details/107987269