先上需求的效果图
el-tree的样式一般全都是block换行的,如下图
先分析一下,
1.树结构的级别是不确定的,但是样式上要求最后一个层级需要横着排列,其余竖着排,超出需要换行
2.如何找到每一个数据项的最后一级呢?
3.找到之后怎么办?
ok,then,
1.先通过插槽吧,因为这样咱们可以自定义最后一个节点的样式,加一个类名作为标识
<el-tree :data="chanelItemList" show-checkbox default-expand-all node-key="id" ref="tree" :highlight-current="false"
:props="defaultProps" :expand-on-click-node="false" :check-on-click-node="true"
:default-checked-keys="defaultCheckedKeys">
<template #default="{ node, data }">
<span class="last-level-node">{{ data.label }}</span>
</template>
</el-tree>
2.通过浏览器编译后,可以看到这个类名标识,且能够反向找到需要改成横着拍的元素,如图:
需要修改的是这个span的父级的父级的父级的样式
3.通过js来做行内样式修改
addClass() {
// 获取所有最后一级节点对应的 .el-tree-node__children 元素
document.querySelectorAll('.last-level-node').forEach(function (element) {
// 获取 .el-tree-node__children 元素
const childrenElement = element.parentNode.parentNode.parentNode;
// 添加 display: flex; 的行内样式
childrenElement.style.display = 'flex';
childrenElement.style.flexWrap = 'wrap';
childrenElement.style.flexDirection = 'row'; // 可选:明确指定水平方向
childrenElement.style.alignItems = 'center'; // 可选:对齐方式
});
}
在钩子函数中调用一下
created() {
this.$nextTick(() => {
this.addClass()
})
}
然后就ok啦~~~
标签:el,style,childrenElement,自定义,flex,样式,tree From: https://www.cnblogs.com/jocelyn11/p/18354581