vue中使用Ement-UI 的 Tree 树形控件及样式修改_vue优化tree树控件样式

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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

  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", //接口返回文字的字段
      },
     }
   }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

展示样式

如果出现多个二级菜单和三级菜单会显示样式很乱,下来我们来给树形添加指示线

注意一点 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，样式自定
  }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59

下面就是有指示线的样子看起来不会那么的杂乱无章

让三级菜单横向排列样式代码

el-tree标签中添加：   :render-content="renderContent"
1

在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";
    };
  }
},
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

一定要及时执行 changeCss() 函数;可以添加 setTimeOut函数来延迟执行

最后横向距离微调

/deep/ .levelname  {
  margin-right: 10px;
}
1
2
3

最后样式

就ok了~ 是不是整洁了很多