vue3 el-tree 自定义图标与点击显示导航栏

最新推荐文章于 2024-09-06 15:01:44 发布

徐自红

最新推荐文章于 2024-09-06 15:01:44 发布

阅读量946

点赞数 2

文章标签： javascript vue.js 前端

本文链接：https://blog.csdn.net/qq_46561492/article/details/129213479

版权

该文章展示了如何在Vue.js中使用el-tree组件，通过自定义图标来区分一级目录和二级目录，并在节点被点击时动态生成面包屑导航。利用节点点击事件和递归函数获取当前选中节点及其父节点信息，构建导航路径。

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

结构

            <el-tree    
            ref="treeRef" 
            class="filter-tree" 
            :data="state.tableData.data" 
            :props="defaultProps"
            :filter-node-method="filterNode" 
            highlight-current 
            @node-click="nodeClick" 
            default-expand-all
            :current-node-key="state.currentLivingId" 
            node-key="organization_id" 
            :expand-on-click-node="false">
            <template #default="{ node, data }">
              <span>
                <i v-if="node.level == 1" class="one_icon"></i>
                <i v-else class="other_icon"></i>
                <span> {{ data.label }} </span>
              </span>
            </template>
           </el-tree>
           <!-- 导航栏 -->
           <p class="department-actions-navigation">
            <div>{{ state.breadLabel }}</div>
           </p>

自定义图标

根据el-tree判断级别，我这里的以及目录与二级目录图标不同

     .one_icon { 
                 background: url("../../../assets/img/organization.png");
                 width: 17px;
                 height: 14px;
                 display: inline-block;
                 background-size: 100% 100%;
                 margin-right: 10px;
               }
      .other_icon { 
                    background: url("../../../assets/img/document.png");
                    width: 17px;
                    height: 14px;
                    display: inline-block;
                    background-size: 100% 100%;
                    margin-right: 10px;
                  }

在这里插入图片描述

操作点击显示导航栏

const state = reactive({
    breadList: [], //面包屑数组
    breadLabel: "", //面包屑文字
});
// el-tree点击事件
const nodeClick = (data) => {
  //获取面包屑
  state.breadList = [];
  getTreeNode(treeRef.value.getNode(data.organization_id));
}
//获取当前树节点和其父级节点
const getTreeNode = (node) => {
  if (node && node.label) {
    state.breadList.unshift(node.label);
    getTreeNode(node.parent); //递归
    state.breadLabel = state.breadList.join(" > ");
  }
};