element-ui的Tree 树形控件和Breadcrumb 面包屑配合使用实现动态渲染面包屑

藕粉桂花糖糖糕

于 2024-03-12 09:12:08 发布

阅读量519

点赞数 6

文章标签： ui vue.js javascript

本文链接：https://blog.csdn.net/lixiaosalalala/article/details/136641403

版权

本文介绍了如何在Vue项目中使用el-tree组件构建一个多级菜单，并实现面包屑导航功能，通过递归方法获取并显示节点的层级关系。

摘要由CSDN通过智能技术生成

<template>
  <div>
    <el-tree
      ref="tree"
      :data="data"
      node-key="id"
      :props="defaultProps"
      @node-click="handleNodeClick">
    </el-tree>
    <el-breadcrumb class="bread-box">
      <el-breadcrumb-item class="bread-text">{{ breadLabel }}</el-breadcrumb-item>
    </el-breadcrumb>
  </div>
</template>

<script>
export default {
  data() {
    return {
      data: [{
        id: 1,
        label: '一级 1',
        children: [{
          id: 4,
          label: '二级 1-1',
          children: [{
            id: 9,
            label: '三级 1-1-1'
          }, {
            id: 10,
            label: '三级 1-1-2'
          }]
        }]
      }, {
        id: 2,
        label: '一级 2',
        children: [{
          id: 5,
          label: '二级 2-1'
        }, {
          id: 6,
          label: '二级 2-2'
        }]
      }, {
        id: 3,
        label: '一级 3',
        children: [{
          id: 7,
          label: '二级 3-1'
        }, {
          id: 8,
          label: '二级 3-2'
        }]
      }],
      defaultProps: {
        children: 'children',
        label: 'label'
      },
      breadList: [], // 面包屑数组
      breadLabel: '', // 面包屑文字
    }
  },
  methods: {
    // 选择节点
    handleNodeClick(data) {
      this.breadList = [] // 获取面包屑
      this.getTreeNode(this.$refs.tree.getNode(data.id))
    },
    // 获取当前树节点及其父节点
    getTreeNode(node) {
      if(node && node.label) {
        this.breadList.unshift(node.label) // 在数组头部添加元素
        this.getTreeNode(node.parent) // 递归
        this.breadLabel = this.breadList.join('>') // 面包屑文字拼接
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.bread-box {
  margin-top: 20px;
  position: relative;
  display: inline-block;
  line-height: 2;

  .bread-text {
    background: linear-gradient(to right, skyblue, green) no-repeat right bottom;
    background-size: 0% 2px;
    transition: background-size 1s ease;
    
    &:hover {
      background: linear-gradient(to right, skyblue, green) no-repeat left bottom;
      background-size: 100% 2px;
    }
  }
}
</style>