el-tree单独设置父节点icon,清除el-tree的节点选中背景色

效果图:

el-tree单独设置父节点icon,清除el-tree的节点选中背景色_第1张图片

HTML代码:

el-tree单独设置父节点icon,清除el-tree的节点选中背景色_第2张图片

data代码:

 这里treeData是其他组件传过来的el-tree单独设置父节点icon,清除el-tree的节点选中背景色_第3张图片

watch监听:对数据进行监听,使数据状态可更新

el-tree单独设置父节点icon,清除el-tree的节点选中背景色_第4张图片

methods方法定义,这里只做了样式处理:

el-tree单独设置父节点icon,清除el-tree的节点选中背景色_第5张图片

 css代码:

el-tree单独设置父节点icon,清除el-tree的节点选中背景色_第6张图片

 el-tree单独设置父节点icon,清除el-tree的节点选中背景色_第7张图片

 el-tree单独设置父节点icon,清除el-tree的节点选中背景色_第8张图片

el-tree单独设置父节点icon,清除el-tree的节点选中背景色_第9张图片

el-tree单独设置父节点icon,清除el-tree的节点选中背景色_第10张图片

完整代码:


 







简单概括说明:

只是一个刚初步封装的公共组件,这里主要是记录:

        根据ui处理机构树的样式问题,这里的父节点是根据数据写死的,第一子节点是组件传来的。

当点击子节点清除父节点的背景,是根据改变动态绑定的class来改变的;

这里点击父节点隐藏和去除子节点的选中效果与背景,取了一个巧,即直接在dom节点树中去除了el-tree;

父节点的划过效果也是用了class:hover来覆盖另一个class:hover来实现的;

总体来说还是用简单的方式实现了看似复杂的效果;

你可能感兴趣的:(vue.js,elementui,前端,css3)