对于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>
);
},