element-ui树形控件el-tree自定义

对于element-UI的树形控件的使用,遇到了一个问题,前台可以一直添加子分类,形成了无限极分类,在我鼠标滑过每一级分类时,都会显示添加子分类,效果是这样的在这里插入图片描述
在自定义时,我做了一个中间变量去做显示隐藏,发现并没有效果。然后换了css去实现,发现是可以的,但是样式一定不能加scoped,一下是代码:

			<el-tree
              :data="dataList"
              :props="defaultProps"
              @node-click="nodeClick"
              node-key="id"
              default-expand-all
              :expand-on-click-node="false"
              :render-content="renderContent"
            ></el-tree>
            renderContent(h, { node, data}) {
      return (
          <div style="width:100%;font-size:14px;" class="my-parent">
            <span >
              <span>{node.label}</span>
            </span>
            <span style="float: right; margin-right: 20px" class="my-child">
              <span >
                  <span style="color: #1386ea;cursor: pointer;margin-right:10px;" on-click={ () => this.newClassify(1,2,data.id) }>添加子分类</span>
                  
                  <span style="color: #1386ea;cursor: pointer;margin-right:10px;" on-click={ () => this.newClassify(3,0,data.id) }>重命名</span>
                  <span style="color: #1386ea;cursor: pointer;margin-right:10px;" on-click={ () => this.del(data.id) }>删除</span>
                </span>
            </span>
          </div>
        );
    },
  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值