VUE element-ui之el-tree树形控件循环遍历渲染dom节点;子节点横向排列;控件添加指示线

简介: VUE element-ui之el-tree树形控件循环遍历渲染dom节点;子节点横向排列;控件添加指示线

步骤:

定义模板(做循环遍历处理):

<template>
          <div class="container">
            <el-card v-for="(item,index) in routeList" :key="index" class="routeList-box">
              <!-- <el-collapse v-model="activeNames">
              <el-collapse-item :title="item.title" :name="index"> -->
              <el-tree
                ref="tree"
                class="el-tree"
                show-checkbox
                node-key="id"
                :indent="0"
                :data="item.list"
                :props="defaultProps"
                :highlight-current="true"
                :default-expand-all="true"
                :render-content="renderContent"
                @node-expand="handleExpand"
              />
              <!--:indent="0"为相邻级节点间的水平缩进,单位为像素,如果要加指示线需设置为0,否则缩进会很大-->
              <!-- </el-collapse-item>
              </el-collapse> -->
            </el-card>
          </div>
        </template>

tree的参数说明请参考官方文档el-tree
定义模板数据:

data() {
    return {
        routeList: [
        {
          // title: '授权管理后台',
          list: [
            {
              id: 1,
              label: '工程管理', //一级控件
              children: [
                {
                  id: 2,
                  label: '物料管理', //二级控件
                  children: [
                    {
                      id: 4,
                      label: '列表查看', //三级控件
                      // children: [
                      //   {
                      //     id: 7,
                      //     label: '页面查看权限' //四级控件
                      //   },
                      //   {
                      //     id: 8,
                      //     label: '编辑'
                      //   }
                      // ]
                    },
                    {
                      id: 5,
                      label: '查询',
                      // children: [
                      //   {
                      //     id: 9,
                      //     label: '次数分布child1'
                      //   },
                      //   {
                      //     id: 10,
                      //     label: '次数分布child2'
                      //   }
                      // ]
                    }
                  ]
                },
                {
                  id: 3,
                  label: '工艺流程管理',
                  children: [
                    {
                      id: 6,
                      label: '列表查看',
                      // children: [
                      //   {
                      //     id: 7,
                      //     label: '页面查看权限'
                      //   }
                      // ]
                    },
                    {
                      id: 7,
                      label: '查询',
                      // children: [
                      //   {
                      //     id: 7,
                      //     label: '页面查看权限'
                      //   }
                      // ]
                    }
                  ]
                }
              ]
            },
            {
              id: 111,
              label: '销售管理',
              children: [
                {
                  id: 112,
                  label: '订单管理',
                  children: [
                    {
                      id: 113,
                      label: '列表查看'
                    },
                    {
                      id: 114,
                      label: '查询'
                    },
                    {
                      id: 114,
                      label: '重置'
                    },
                    {
                      id: 114,
                      label: '复选框'
                    },
                    {
                      id: 114,
                      label: '新增订单'
                    },
                    {
                      id: 114,
                      label: '导出'
                    },
                    {
                      id: 114,
                      label: '打印'
                    },
                    {
                      id: 114,
                      label: '操作'
                    },
                    {
                      id: 114,
                      label: '订单详情'
                    },
                    {
                      id: 114,
                      label: '编辑'
                    },
                    {
                      id: 114,
                      label: '作废'
                    },
                    {
                      id: 114,
                      label: '出库'
                    },
                    {
                      id: 114,
                      label: '结束'
                    }
                  ]
                }
              ]
            }
          ]
        }
      ],
      defaultProps: {
        children: 'children',
        label: 'label'
      }
    }
}

js部分:

mounted() {
    this.changeCss() //默认调用此方法将子节点渲染为横向排列
  },
methods: {
    handleExpand() { // 节点被展开时触发的事件
      // 因为该函数执行在renderContent函数之前,所以得加this.$nextTick()
         this.$nextTick(() => {
        this.changeCss()
      })
    },
    renderContent(h, { node, data, store }) { // 树节点的内容区的渲染 Function
      let classname = ''
      // 由于项目中有三级菜单也有四级级菜单,就要在此做出判断
      if (node.level === 4) {
        classname = 'foo'
      }
      if (node.level === 3 && node.childNodes.length === 0) {
        classname = 'foo'
      }
      return h(
        'p',
        {
          class: classname
        },
        node.label
      )
    },
    changeCss() { //将子节点横向排列方法
      var levelName = document.getElementsByClassName('foo') // 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'
        }
      }
    }
}

指示线样式部分:

<style scoped lang="scss">
// 树样式
.el-tree{
  ::v-deep .el-tree-node{
    position: relative;
    padding-left: 16px; // 缩进量
  }
  ::v-deep .el-tree-node__children{
    padding-left: 16px; // 缩进量
  }
  // 竖线
  ::v-deep .el-tree-node::before{
    content:"";
    height: 100%;
    width: 1px;
    position: absolute;
    left: -3px;
    top: -26px;
    border-width: 1px;
    border-left: 1px dashed #ccc;
  }
  // 当前层最后⼀个节点的竖线⾼度固定
  ::v-deep .el-tree-node:last-child::before{
    height: 38px; // 可以⾃⼰调节到合适数值
  }
  // 横线
  ::v-deep .el-tree-node::after{
    content:"";
    width: 24px;
    height: 20px;
    position: absolute;
    left: -3px;
    top: 12px;
    border-width: 1px;
    border-top: 1px dashed #ccc;
  }
  // 去掉最顶层的虚线,放最下⾯样式才不会被上⾯的覆盖了
  & > ::v-deep .el-tree-node::after{
    border-top: none;
  }
  & > ::v-deep .el-tree-node::before{
    border-left: none;
  }
  // 展开关闭的icon
  ::v-deep .el-tree-node__expand-icon{
    font-size: 16px;
    // 叶⼦节点(⽆⼦节点)
    ::v-deep &.is-leaf{
      color: transparent;
      // display: none; // 也可以去掉
    }
  }
}
</style>

实际效果:

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

相关文章
|
4月前
|
JavaScript 前端开发 开发者
09.HarmonyOS Next数据驱动UI开发:ForEach与动态渲染完全指南(上)
在现代前端开发中,数据驱动UI已成为主流开发范式。HarmonyOS Next的ArkTS语言和声明式UI框架完美支持这一理念,使开发者能够以更高效、更直观的方式构建复杂应用。
102 1
|
10月前
|
移动开发 前端开发 Java
Java最新图形化界面开发技术——JavaFx教程(含UI控件用法介绍、属性绑定、事件监听、FXML)
JavaFX是Java的下一代图形用户界面工具包。JavaFX是一组图形和媒体API,我们可以用它们来创建和部署富客户端应用程序。 JavaFX允许开发人员快速构建丰富的跨平台应用程序,允许开发人员在单个编程接口中组合图形,动画和UI控件。本文详细介绍了JavaFx的常见用法,相信读完本教程你一定有所收获!
8955 5
Java最新图形化界面开发技术——JavaFx教程(含UI控件用法介绍、属性绑定、事件监听、FXML)
|
10月前
|
前端开发 Linux C#
一款开源、免费、美观的 Avalonia UI 原生控件库 - Semi Avalonia
一款开源、免费、美观的 Avalonia UI 原生控件库 - Semi Avalonia
805 10
|
11月前
|
人工智能 API Apache
推荐3款开源、美观且免费的WinForm UI控件库
推荐3款开源、美观且免费的WinForm UI控件库
1880 6
|
12月前
|
JavaScript
HTML DOM 节点树
HTML DOM 节点是指在 HTML 文档对象模型中,文档中的所有内容都被视为节点。整个文档是一个文档节点,每个 HTML 元素是元素节点,元素内的文本是文本节点,属性是属性节点,注释是注释节点。DOM 将文档表示为节点树,节点之间有父子和同胞关系。
|
12月前
|
JavaScript
HTML DOM 节点
HTML DOM(文档对象模型)将HTML文档视为节点树,其中每个部分都是节点:文档本身是文档节点,HTML元素是元素节点,元素内的文本是文本节点,属性是属性节点,注释是注释节点。节点间存在父子及同胞关系,形成层次结构。
|
11月前
|
API C# 开发者
基于Material Design风格开源、免费的WinForms UI控件库
基于Material Design风格开源、免费的WinForms UI控件库!
256 0
|
JavaScript 索引
vue——element-ui中的表格和分页器连接起来
vue——element-ui中的表格和分页器连接起来
|
15天前
|
JavaScript
Vue中如何实现兄弟组件之间的通信
在Vue中,兄弟组件可通过父组件中转、事件总线、Vuex/Pinia或provide/inject实现通信。小型项目推荐父组件中转或事件总线,大型项目建议使用Pinia等状态管理工具,确保数据流清晰可控,避免内存泄漏。
134 2
|
4月前
|
人工智能 JavaScript 算法
Vue 中 key 属性的深入解析:改变 key 导致组件销毁与重建
Vue 中 key 属性的深入解析:改变 key 导致组件销毁与重建
571 0

热门文章

最新文章