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>
AI 代码解读

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'
      }
    }
}
AI 代码解读

js部分:

mounted() {
    this.changeCss() //默认调用此方法将子节点渲染为横向排列
  },
AI 代码解读
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'
        }
      }
    }
}
AI 代码解读

指示线样式部分:

<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>
AI 代码解读

实际效果:

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

目录
打赏
0
0
0
0
2
分享
相关文章
vue学习第7章(循环)
欢迎来到瑞雨溪的博客,一名热爱JavaScript和Vue的大一学生。本文介绍了Vue中的v-for指令,包括遍历数组和对象、使用key以及数组的响应式方法等内容,并附有综合练习实例。关注我,将持续更新更多优质文章!🎉🎉🎉
49 1
vue学习第7章(循环)
Vue开发中Element UI/Plus使用指南:常见问题(如Missing required prop: “value“)及中文全局组件配置解决方案
Vue开发中Element UI/Plus使用指南:常见问题(如Missing required prop: “value“)及中文全局组件配置解决方案
325 0
低代码可视化教你Vue遍历循环绑定
低代码可视化教你Vue遍历循环绑定
44 0
Duplicate keys detected: This may cause an update error.【Vue遍历渲染报错的解决】
这篇文章讨论了在Vue中进行列表渲染时遇到的“Duplicate keys detected”错误。这个错误通常发生在使用 `v-for` 指令渲染列表时,如果没有为每个循环项指定一个唯一的 `key` 属性,或者指定的 `key` 属性值重复了。文章提供了导致错误的原始代码示例,并给出了修正后的代码,通过在 `key` 绑定中加入索引确保 `key` 的唯一性。此外,文章还解释了为什么需要唯一 `key` 以及如何解决这个问题。
Duplicate keys detected: This may cause an update error.【Vue遍历渲染报错的解决】
Ant Design Vue UI框架的基础使用,及通用后台管理模板的小demo【简单】
这篇文章介绍了如何使用Ant Design Vue UI框架创建一个简单的后台管理模板,包括创建Vue项目、安装和使用ant-design-vue、以及编写后台管理通用页面的代码和样式。
Ant Design Vue UI框架的基础使用,及通用后台管理模板的小demo【简单】
[译] 在 Vue 组件中分离 UI 和业务逻辑。
[译] 在 Vue 组件中分离 UI 和业务逻辑。
vue element-ui 中el-message重复弹出问题解决 el-message重复弹出解决办法
vue element-ui 中el-message重复弹出问题解决 el-message重复弹出解决办法
356 49
|
6月前
|
Element - Vue使用slot-scope和v-for遍历数据为树形表格
这篇文章介绍了在Vue中使用`slot-scope`和`v-for`指令来遍历数据并将其渲染为树形表格的方法。
92 0
Element - Vue使用slot-scope和v-for遍历数据为树形表格
Vue实现Element UI框架的自定义输入框或下拉框在输入时对列表选项进行过滤,以及右键列表选项弹出菜单进行删除
本文介绍了如何在Vue框架结合Element UI库实现自定义输入框或下拉框,在输入时对列表选项进行过滤,并支持右键点击列表选项弹出菜单进行删除的功能。
187 0
Vue+Element UI
该博客文章介绍了如何在Vue中集成Element UI来构建后台管理系统的左侧菜单,包括使用`el-menu`、`el-submenu`和`el-menu-item`等组件,并通过Vue router动态构建菜单项及其路由设置。

热门文章

最新文章

AI助理

你好,我是AI助理

可以解答问题、推荐解决方案等