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

  
  
  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 (
          {data.is_show=true}}  on-mouseout={()=>{data.is_show=false}}>
            {node.label}
            {
              data.is_show ? 
              
               this.append(data)}>添加
               this.remove(node, data)}>编辑
               this.remove(node, data)}>删除
              : null
            }

          );
      },

    }

element 树形控件el-tree 添加hover事件 完整代码_第1张图片

你可能感兴趣的:(element 树形控件el-tree 添加hover事件 完整代码)