element中树形控件组件设置样式

  在实际开发中一些element-ui中的树形控件基本样式无法满足我们的设计需求，所以我们一般要进行二次修改

下面是我实际开发中需要修改的样式

 

 然而element提供的树形控件是

我们的思路是给伪元素加样式实现虚线连接

.tree {
  /deep/ .el-tree-node__content {
    padding: 0 !important;
  }
  /deep/ .el-tree-node {
    position: relative;
    padding-left: 16px;
  }
  /deep/ .el-tree-node__children {
    padding-left: 16px;
  }

  // 竖线
  /deep/ .el-tree-node::before {
    content: "";
    height: 100%;
    width: 1px;
    position: absolute;
    left: -3px;
    top: -26px;
    border-width: 1px;
    border-left: 1px dashed #52627c;
  }

  /deep/ .el-tree-node:last-child::before {
    height: 38px; 
  }

  // 横线
  /deep/ .el-tree-node::after {
    content: "";
    width: 24px;
    height: 20px;
    position: absolute;
    left: -3px;
    top: 12px;
    border-width: 1px;
    border-top: 1px dashed #52627c;
  }

  /deep/ & > .el-tree-node::after {
    border-top: none;
  }
  /deep/ & > .el-tree-node::before {
    border-left: none;
  }

  /deep/ .el-tree-node__expand-icon {
    font-size: 16px;
  }
  // /deep/ .is-leaf {
  //   // display: none;
  // }
}

拓展自定义节点内容给节点添加图标并设置不同的颜色

 设置动态icon以及颜色

<template>
  <div>
    <el-tree
      class="tree"
      :data="data"
      :props="defaultProps"
      @node-click="handleNodeClick"
    >
      <span slot-scope="{ node, data }">
        <i :class="data.icon" :style="`color: ${data.color}`"></i>
        <span style="padding-left: 4px">{{ node.label }}</span>
      </span>
    </el-tree>
  </div>
</template>

在script中设置其对应的数据

<script>
export default {
  data() {
    return {
      data: [
        {
          label: "一级 1",
          icon: "el-icon-s-custom",
          color: "blue",
          children: [
            {
              icon: "el-icon-document",
              label: "二级 1-1",
              children: [
                {
                  label: "三级 1-1-1",
                },
              ],
            },
          ],
        },
        {
          label: "一级 2",
          icon: "el-icon-s-opportunity",
          color: "red",
          children: [
            {
              icon: "el-icon-document",
              label: "二级 2-1",
              children: [
                {
                  label: "三级 2-1-1",
                },
              ],
            },
            {
              label: "二级 2-2",
              children: [
                {
                  label: "三级 2-2-1",
                },
              ],
            },
          ],
        },
        {
          label: "一级 3",
          children: [
            {
              label: "二级 3-1",
              children: [
                {
                  label: "三级 3-1-1",
                },
              ],
            },
            {
              label: "二级 3-2",
              children: [
                {
                  label: "三级 3-2-1",
                },
              ],
            },
          ],
        },
      ],
      defaultProps: {
        children: "children",
        label: "label",
        icon: "icon",
      },
    };
  },
  methods: {
    handleNodeClick(data) {
      console.log(data);
    },
  },
};
</script>

最终的样式

 给大家把最终代码展示如下

 

<template>
  <div>
    <el-tree
      class="tree"
      :data="data"
      :props="defaultProps"
      @node-click="handleNodeClick"
    >
      <span slot-scope="{ node, data }">
        <i :class="data.icon" :style="`color: ${data.color}`"></i>
        <span style="padding-left: 4px">{{ node.label }}</span>
      </span>
    </el-tree>
  </div>
</template>

<script>
export default {
  data() {
    return {
      data: [
        {
          label: "一级 1",
          icon: "el-icon-s-custom",
          color: "blue",
          children: [
            {
              icon: "el-icon-document",
              label: "二级 1-1",
              children: [
                {
                  label: "三级 1-1-1",
                },
              ],
            },
          ],
        },
        {
          label: "一级 2",
          icon: "el-icon-s-opportunity",
          color: "red",
          children: [
            {
              icon: "el-icon-document",
              label: "二级 2-1",
              children: [
                {
                  label: "三级 2-1-1",
                },
              ],
            },
            {
              label: "二级 2-2",
              children: [
                {
                  label: "三级 2-2-1",
                },
              ],
            },
          ],
        },
        {
          label: "一级 3",
          children: [
            {
              label: "二级 3-1",
              children: [
                {
                  label: "三级 3-1-1",
                },
              ],
            },
            {
              label: "二级 3-2",
              children: [
                {
                  label: "三级 3-2-1",
                },
              ],
            },
          ],
        },
      ],
      defaultProps: {
        children: "children",
        label: "label",
        icon: "icon",
      },
    };
  },
  methods: {
    handleNodeClick(data) {
      console.log(data);
    },
  },
};
</script>

<style lang="less" scoped>
.tree {
  /deep/ .el-tree-node__content {
    padding: 0 !important;
  }
  /deep/ .el-tree-node {
    position: relative;
    padding-left: 16px;
  }
  /deep/ .el-tree-node__children {
    padding-left: 16px;
  }

  // 竖线
  /deep/ .el-tree-node::before {
    content: "";
    height: 100%;
    width: 1px;
    position: absolute;
    left: -3px;
    top: -26px;
    border-width: 1px;
    border-left: 1px dashed #52627c;
  }

  /deep/ .el-tree-node:last-child::before {
    height: 38px; 
  }

  // 横线
  /deep/ .el-tree-node::after {
    content: "";
    width: 24px;
    height: 20px;
    position: absolute;
    left: -3px;
    top: 12px;
    border-width: 1px;
    border-top: 1px dashed #52627c;
  }

  /deep/ & > .el-tree-node::after {
    border-top: none;
  }
  /deep/ & > .el-tree-node::before {
    border-left: none;
  }

  /deep/ .el-tree-node__expand-icon {
    font-size: 16px;
  }
  // /deep/ .is-leaf {
  //   // display: none; // 也可以去掉
  // }
}
</style>