vue中使用Ement-UI 的 Tree 树形控件及样式修改
vue中使用Ement-UI 的 Tree 树形控件及样式修改在写项目中是用到了三级分类菜单使用了element-ui的tree组件心得给大家分享一下<div class="over"><el-treeclass="tree" //样式类名:data="data" //数据show-checkbox//节点是否可被选择iodent="0" //注意设置::indent="0",否
·
vue中使用Ement-UI 的 Tree 树形控件及样式修改
在写项目中是用到了三级分类菜单使用了element-ui的tree组件心得给大家分享一下
<div class="over">
<el-tree
class="tree" //样式类名
:data="data" //数据
show-checkbox //节点是否可被选择
iodent="0" //注意设置: :indent="0",否则节点会出现较大缩进
default-expand-all //是否默认展开所有节点
node-key="id" //每个树节点用来作为唯一标识的属性,整棵树应该是唯一的
ref="tree"
highlight-current //是否高亮当前选中节点,默认值是 false。
:props="defaultProps" //配置选项 --- 子类名称
:render-content="renderContent" //树节点的内容区的渲染 Function
@node-expand="handleExpand" //节点被展开时触发的事件
></el-tree>
</div>
data() {
return {
//数据
data: [{
label: '一级 1',
children: [{
label: '二级 1-1',
children: [{
label: '三级 1-1-1'
}]
}]
}, {
label: '一级 2',
children: [{
label: '二级 2-1',
children: [{
label: '三级 2-1-1'
}]
}, {
label: '二级 2-2',
children: [{
label: '三级 2-2-1'
}]
}]
}],
//展示匹配的字段
defaultProps: {
children: "children", //子类的名称
label: "label", //接口返回文字的字段
},
}
}
展示样式
如果出现多个二级菜单和三级菜单会显示样式很乱,下来我们来给树形添加指示线
注意一点 over是tree父容器的class name,通过此方法设置tree的根节点样式
.tree-container /deep/ .el-tree > .el-tree-node:after {
border-top: none;
}
<style scoped>
.tree /deep/ .el-tree-node {
position: relative;
padding-left: 16px;
}
.tree /deep/ .el-tree-node__children {
padding-left: 16px;
}
.tree /deep/ .el-tree-node :last-child:before {
height: 38px;
}
.tree /deep/ .el-tree > .el-tree-node:before {
border-left: none;
}
.tree-container /deep/ .el-tree > .el-tree-node:after {
border-top: none;
}
.tree /deep/ .el-tree-node:before {
content: "";
left: -4px;
position: absolute;
right: auto;
border-width: 1px;
}
.tree /deep/ .el-tree-node:after {
content: "";
left: -4px;
position: absolute;
right: auto;
border-width: 1px;
}
.tree /deep/ .el-tree-node:before {
border-left: 1px dashed #4386c6;//指示线的样式和颜色粗细
bottom: 0px;
height: 100%;
top: -26px;
width: 1px;
}
.tree /deep/ .el-tree-node:after {
border-top: 1px dashed #4386c6; //指示线的样式和颜色粗细
height: 20px;
top: 12px;
width: 24px;
}
.tree-container { //树的parent,样式自定
}
下面就是有指示线的样子看起来不会那么的杂乱无章
让三级菜单横向排列样式代码
el-tree标签中添加: :render-content="renderContent"
在js中写三个方法
//节点被展开时触发的事件
handleExpand() {
//因为该函数执行在renderContent函数之前,所以得加定时
setTimeout(() => {
this.changeCss();
}, 10);
},
// 内容区渲染后执行 判断底层 赋 class
renderContent(h, { node, data, store }) {
//树节点的内容区的渲染 Function
let classname = "";
// 由于项目中有三级菜单也有四级级菜单,就要在此做出判断
if (node.level === 3) {
classname = "foo";
}
if (node.level === 2 && node.childNodes.length === 0) {
classname = "foo";
}
return h(
"p",
{
class: classname,
},
node.label
);
},
changeCss() {
var levelName = document.getElementsByClassName("foo"); // levelname是上面的最底层节点的名字
// console.log(levelName);
for (var i = 0; i < levelName.length; i++) {
// cssFloat 兼容 ie6-8 styleFloat 兼容ie9及标准浏览器
levelName[i].parentNode.style.cssFloat = "left"; // 最底层的节点,包括多选框和名字都让他左浮动
levelName[i].parentNode.style.styleFloat = "left";
levelName[i].parentNode.onmouseover = function () {
this.style.backgroundColor = "#fff";
};
}
},
一定要及时执行 changeCss() 函数;可以添加 setTimeOut函数来延迟执行
最后横向距离微调
/deep/ .levelname {
margin-right: 10px;
}
最后样式
就ok了~ 是不是整洁了很多
更多推荐
已为社区贡献21条内容
所有评论(0)