element 树形控件el-tree 添加hover事件完整代码

最新推荐文章于 2025-08-12 23:15:05 发布

转载最新推荐文章于 2025-08-12 23:15:05 发布 · 4.1k 阅读

本内容遵循CC 4.0 BY-SA版权协议

原文链接：https://segmentfault.com/a/1190000039063875?utm_source=tag-newest

这篇博客介绍了如何使用Vue.js创建一个树形组件，包括默认展开所有节点、过滤节点方法以及通过自定义渲染内容实现节点悬停显示操作按钮（添加、编辑、删除）。在`renderContent`方法中，利用`on-mouseover`和`on-mouseout`事件控制节点的显示状态，并提供了数据操作的方法。

  <el-tree class="filter-tree" :render-content="renderContent" :data="data" :props="defaultProps" default-expand-all :filter-node-method="filterNode"
    ref="tree">
  </el-tree>

  export default {
    data() {
      return {    
        data: [{
          id: 1,
          label: '一级 1',
          is_show:false,
          children: [{
            id: 4,
            label: '二级 1-1',
            is_show:false,
            children: [{
              id: 9,
              is_show:false,
              label: '三级 1-1-1'
            }, {
              id: 10,
              is_show:false,
              label: '三级 1-1-2'
            }]
          }]
        }],
        defaultProps: {
          children: 'children',
          label: 'label'
        }
      }
    },
  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);
      },
      /**这里是关键一步，实现hover */
      renderContent(h, { node, data, store }) {
        console.log(data)
        return (
          <span class="custom-tree-node" on-mouseover={()=>{data.is_show=true}}  on-mouseout={()=>{data.is_show=false}}>
            <span>{node.label}</span>
            {
              data.is_show ? 
              <span>
              <el-button size="mini" type="text" on-click={() => this.append(data)}>添加</el-button>
              <el-button size="mini" type="text" on-click={() => this.remove(node, data)}>编辑</el-button>
              <el-button size="mini" type="text" on-click={() => this.remove(node, data)}>删除</el-button>
             </span> : null
            }

          </span>);
      },

    }