vue+element+iframe非组件实现树形导航

最新推荐文章于 2022-06-14 10:54:03 发布
最新推荐文章于 2022-06-14 10:54:03 发布
阅读量1k 收藏 5
点赞数
分类专栏： 前端 文章标签： 树形导航
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/z2014ypd/article/details/89975796
版权

最近在做项目过程中，自己写了个首页，要用到树形导航与标签页结合展示页面，使用的而且是iframe页面嵌套的方式，不使用组件。以下是代码，仅供参考，关注关键代码就行了

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>中方科技客户关系管理系统</title>
    <%@ page contentType="text/html;charset=UTF-8" language="java" %>
	<script src="/static/plugins/vuejs/vue.js" type="text/javascript"></script>
	<!-- 引入样式 -->
	<link rel="stylesheet" href="/static/plugins/elementui/lib/theme-chalk/index.css">
	<!-- 引入组件库 -->
	<script src="/static/plugins/elementui/lib/index.js"></script>
	<%--路由--%>
	<script src="/static/plugins/vuejs/vue-router.js" type="text/javascript"></script>
	<%--axios--%>
	<script src="/static/plugins/vuejs/axios.js" type="text/javascript"></script>
</head>
<body>
<div id="app">
    <el-container>
        <el-header>
            <el-row style="line-height: 70px">
                <el-col :span="10" :offset="2" style="font-family: 华文楷体;font-size: 50px;">中方科技CRM管理系统</el-col>
                <el-col :span="12" style="text-align: right">
                    <span>${user.userName}</span>
                    <el-dropdown>
                        <i class="el-icon-setting" style="margin-right: 15px"></i>
                        <el-dropdown-menu slot="dropdown">
                            <el-dropdown-item @click.native="editPwd">修改密码</el-dropdown-item>
                            <el-dropdown-item @click.native="open">注销登录</el-dropdown-item>
                        </el-dropdown-menu>
                    </el-dropdown>
                </el-col>
            </el-row>
        </el-header>
        <el-container>
            <el-aside width="180px" style="height: 595px;">
                <el-row class="tac">
                    <el-col :span="12">
                        <el-menu
                                class="el-menu-vertical-demo"
                                background-color="#F6F6F6">
                            <el-submenu index="1">
                                <template slot="title">
                                    <i class="el-icon-menu"></i>
                                    <span>菜单</span>
                                </template>
                                <el-tree style="margin-left: 12px; background-color: #F6F6F6" :data="treeData"
                                         node-key="id" :props="defaultProps" @node-click="handleNodeClick">
                                    <span class="custom-tree-node" slot-scope="{ node, data }">
                                        <span>
                                            <i :class="node.icon"></i>{{ node.label }}
                                        </span>
                                    </span>
                                </el-tree>
                            </el-submenu>
                        </el-menu>
                    </el-col>
                </el-row>
            </el-aside>
            <el-container>
                <el-main>
                    <el-tabs v-model="editableTabsValue" type="border-card" closable @tab-remove="removeTab">
                        <el-tab-pane
                                v-for="(item, index) in editableTabs"
                                :key="item.name"
                                :label="item.title"
                                :name="item.name"
                        >
                            <iframe :src="item.content" style="width: 100%;height: 450px" frameborder="0"></iframe>
                        </el-tab-pane>
                    </el-tabs>
                </el-main>
                <el-footer style="height: 30px;">
                    ®2006-2018重庆大智若愚网络科技有限公司 版权所有　渝ICP备14030149号-1　 渝公网安备510114990541
                </el-footer>
            </el-container>
        </el-container>
    </el-container>
</div>

<script>
    new Vue({
        el: "#app",
        data: {
            currentUser:'',
            treeData: [
                {
                    label: '客户管理',
                    icon: 'el-icon-location',
                    children: [{
                        label: '潜在客户',
                        url: '/potentialCustomer/index',
                        icon: 'el-icon-location-outline'
                    },{
                        label: '开发计划',
                        url: '/customerDevPlan/index',
                        icon: 'el-icon-location-outline'
                    },{
                        label: '正式客户',
                        url: '/customer/index',
                        icon: 'el-icon-location-outline'
                    },{
                        label: '跟进历史',
                        url: '/customerTraceHistory/index',
                        icon: 'el-icon-location-outline'
                    },{
                        label: '移交记录',
                        url: '/customerTransfer/index',
                        icon: 'el-icon-location-outline'
                    },{
                        label: '资源池',
                        url: '/customerResourcePool/index',
                        icon: 'el-icon-location-outline'
                    }]
                },{
                    label: '订单管理',
                    icon: 'el-icon-location',
                    children: [{
                        label: '订单明细',
                        url: '/order/index',
                        icon: 'el-icon-location-outline'
                    }]
                },{
                    label: '合同管理',
                    icon: 'el-icon-location',
                    children: [{
                        label: '合同明细',
                        url: '/Contract/index',
                        icon: 'el-icon-location-outline'
                    }, {
                        label: '付款详情',
                        url: '/ContractDetails/index',
                        icon: 'el-icon-location-outline'
                    }]
                },{
                    label: '保修单管理',
                    icon: 'el-icon-location',
                    children: [{
                        label: '保修单明细',
                        url: '/Guarantee/index',
                        icon: 'el-icon-location-outline'
                    }, {
                        label: '保修单详情',
                        url: '/guaranteeDetail/index',
                        icon: 'el-icon-location-outline'
                    }]
                },{
                    label: '员工管理',
                    icon: 'el-icon-location',
                    children: [{
                        label: '员工明细',
                        url: '/employee/index',
                        icon: 'el-icon-location-outline'
                    }]
                },{
                    label: '部门管理',
                    icon: 'el-icon-location',
                    children: [{
                        label: '部门明细',
                        url: '/department/index',
                        icon: 'el-icon-location-outline'
                    }]
                }, {
                    label: '基础数据管理',
                    icon: 'el-icon-location',
                    children: [{
                        label: '数据字典',
                        url: '/systemDictionary/index',
                        icon: 'el-icon-location-outline'
                    },{
                        label: '租户管理',
                        url: '/tenant/index',
                        icon: 'el-icon-location-outline'
                    },{
                        label: '套餐管理',
                        url: '/setMeal/index',
                        icon: 'el-icon-location-outline'
                    }]
                }
            ],
            defaultProps: {
                children: 'children',
                label: 'label'
            },
            editableTabsValue: '1',
            editableTabs: [{
                title: '首页',
                name: '1',
                content: '/login/hello'
            }],
            tabIndex: 1
        },
        methods: {
            //修改密码
            editPwd(){
              alert("赶紧写！！")
            },
            //跳转到登录
            open(){
                //发送注销登录请求
                location.href = "/login/loginOut";

            },
            //标签页处理
            handleNodeClick(data) {
                if (!data.children) {
                    //取得当前已打开的tab页
                    let tabs = this.editableTabs;
                    let flag = true;//表示可以新打开
                    tabs.forEach((tab, index) => {
                        if (tab.title === data.label) {
                            //如果打开则选中
                            this.editableTabsValue = tab.name;
                            flag = false;
                            return;
                        }
                    });
                    if (flag) {//如果没有打开则添加
                        let newTabName = ++this.tabIndex + '';
                        this.editableTabs.push({
                            title: data.label,
                            name: newTabName,
                            content: data.url
                        });
                        this.editableTabsValue = newTabName;
                    }
                }
            },
            //标签页移除
            removeTab(targetName) {
                let tabs = this.editableTabs;
                let activeName = this.editableTabsValue;
                if (activeName === targetName) {
                    tabs.forEach((tab, index) => {
                        if (tab.name === targetName) {
                            let nextTab = tabs[index + 1] || tabs[index - 1];
                            if (nextTab) {
                                activeName = nextTab.name;
                            }
                        }
                    });
                }

                this.editableTabsValue = activeName;
                this.editableTabs = tabs.filter(tab => tab.name !== targetName);
            },
            /*loaduser(){
                this.currentUser = JSON.parse('${user}')
            }*/
        }
        /*mounted(){
            this.loaduser();
        }*/
    })

</script>
<style>
    .el-header {
        background-color: #6699CC;
        color: #FFFFFF;
        height: 80px;
        line-height: 70px;
        background-repeat: no-repeat;
        background-position: 28px;
        background-image: url("/static/images/kehu.png");
    }

    .el-footer {
        background-color: #E6E6E6;
        color: #333;
        text-align: center;
        line-height: 30px;
    }

    body > .el-container {
        margin-bottom: 40px;
    }

    .el-menu {
        border: none;
        width: 180px;
    }

    .el-aside {
        background-color: #E2E2E2;
        color: #333;
    }

    .el-main {
        background-color: #FFFFFF;
        color: #333;
        text-align: left;
    }
</style>
</body>
</html>
小小志秩
关注
  • 0
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue 实现树形结构非tree组件
11-26
Vue实现树形结构，不采用tree组件，利用循环方式得到；实现全选，勾选父节点自动勾选子节点，勾选子节点反勾选相应父节点功能
vue element 左侧动态树形导航 Demo
张兴华的博客
06-24 6836
因为官方给的例子是死的数据，全都用html写出来很多，所以想通过数据去展示nav，于是简单踩了下坑。 效果图 code <div class="nav-list"> <el-row class="tac"> <el-col> <el-menu default-active="/" ...
vue+elemenUi+menu实现树形导航栏、递归组件、目录、菜单、menu、forEach、Math、floor、random
软件毕设协助及软件开发、IT、程序、编程、程序员、写代码、工程师、互联网、物联网、技术栈、软件开发、硬件开发、计算机科技、智慧电子模块。
06-14 751
vue+elemenUi+menu实现树形导航栏、递归组件、目录、菜单、menu、forEach、Math、floor、random
Vue导航栏，基于elementUI的导航菜单树
qbbhgn的博客
06-09 1383
先上效果图↓↓↓ 目前我们要做的效果就是左边这一块 因为是基于elementUI的，所以需要先下载elementUI的依赖，老手可忽略 npm i element-ui -S 同时还需要用到vuex，用于控制头部标签与左边菜单栏的同步操作 安装vuex依赖 npm install vuex --save 如果你是小白，请先学会vuex的使用 目前的功能没有使用到vuex，后续功能会用到，所以目前vuex可以忽略↑↑↑ 为了演示方便，我是把所有导航栏的文件放在一起的，可以不用和我一样 废话不多说，直接
树形菜单导航Vue和Element实现
m0_45043105的博客
12-07 969
最近做项目时遇到一小难点，动态渲染element-ui 的侧边栏 导航菜单，有三级路由，有二级的，渲染完事了发现二级的跳转不了路由，这可着急坏了，出了一身汗。。。。 二级里面的订单列表不能跳转路由，三级里面才可以跳转，而且还有个小箭头，经过几个小时的研究 最终搞定， 最终是利用vue name属性，然后实现递归 编写一个自定义zMenu.vue组件，其中实现递归逻辑 <template&...
vue+element树组件 实现树懒加载的过程详解
10-16
总结来说，实现Vue+Element UI树组件的懒加载涉及以下几个关键步骤： 1. 在前端定义树组件，设置`lazy`属性并提供`load`方法。 2. 设计后台接口，根据节点层级返回相应的数据。 3. 在Vue实例中定义数据和方法，处理...
vue+element导航+标签导航+路由跳转+路由转换.zip
05-21
vue+element导航+标签导航+路由跳转+路由转换，有需要可以取，博客有详尽说明，https://blog.csdn.net/Hei_lovely_cat/article/details/104692047
vue+element实现大文件上传
07-04
vue+element实现大文件上传
vue+element UI实现树形表格带复选框的示例代码
10-17
在Vue和Element UI框架中，实现树形表格带复选框功能可以极大地增强用户界面的交互性和数据管理能力。以下是一些关键知识点和步骤，详细解释如何构建这样的组件： 1. **数据转换**： 树形表格的数据通常不是直接以...
vue+element简单实现商城网站首页，模仿电商商城
04-17
vue+element简单实现商城网站首页，模仿电商商城，简洁易懂的经典vue项目布局，无论是作为学习模板还是产品实现都是可以的，拓展性强大，本项目基于elementui实现，从这里可以轻松学到页面头底部共用、菜单、轮播图...
在vue中实现嵌套页面(iframe)
10-15
主要介绍了在vue中实现嵌套页面(iframe)，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
用Vue实现一个最简单的树形组件
hans774882968的博客
08-19 1967
一个简洁的树形组件实现，作为一个练手。 index.html <!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>树形组件</title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.co
VUE递归组件实现一个简单的树形结构
不忘初心，方得始终！
03-06 4005
关于什么情况下使用以及里面使用的部分原理在本文就不做说明了，现在介绍的只是简单的一种实现的方式； 先看下实现的效果： 简单介绍下这个组件的功能： 1. 显示是否存在下级菜单的左侧按钮提示 2. 展开的时候的左侧按钮的展示状态的改变 3. 选中的时候文字的颜色的变化 4. 点击文字选中的时候会返回当前的这个位置的内容（可根据自己需求进行修改） 先看下父组件的代码： &l...
[javascript] vuejs的elementui配合iframe实现页面跳转
程序员老狼专注开发aigc或客服系统应用
05-13 1165
一般后台界面都有三大部分 , 顶部导航 , 左侧导航,右侧的主界面 . 点击左侧和顶部的导航 , 可以在右侧的主界面展示不同的界面 大部分后台的界面都是使用的iframe嵌套的形式,基于vue也是可以方便的使用iframe的 html部分如下: 主要就是给iframe绑定一个变量 , 给左侧导航绑定点击事件 ,都是vuejs里面的用法 <div id="app"> ...
element-ui NavMenut组件 与 Tabs组件 联动
Study_Live_Sun的博客
09-16 751
效果 所需工具 vuex -注：如果对vuex不熟悉的同学参考文章 更新记录 2020/4/15 新增sessionStorage 解决刷新后消失问题 思路 封装NavMenut组件组件及Tabs组件 用 vuex 作为组件之间传值 router-view 放入 Tabs组件内 使用使用 Array.prototype.some()方法 为了防止用户多次点击添加 做一个判断的值 用 Array.prototype.some() 实现 Array.prototype.i..
组件-Element—NavMenu（ 导航菜单）
GU_AO_SHI_TAI_DU的博客
07-04 8107
组件-Element—NavMenu（ 导航菜单） 组件—导航菜单 顶栏 <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect"> <el-menu-item index="1">处理中心</el-menu-ite...
element navmenu侧边栏动态切换iframe标签
wangshuai13383347132的博客
12-17 706
通过element navment侧边栏组件，@select事件获取选中的index,方法里面根据index不用，切换iframe的src路径，实现导航的效果。 标签 <div class = "top"> <el-menu @select = "getIndex" @open="handleOpen" @close="handleClose" :collapse="isCollapse" &gt
实现elementUI的tabs标签页切换时每个标签页下的iframe自动重载
weixin_43734732的博客
01-05 5350
首先给t每个tabs标签页下的iframe绑定ref，ref的值与el-tab-pane的name属性的值一致 通过tab-click方法取到当前选中标签页的iframe，然后执行刷新 <el-tabs v-model="activeName" @tab-click="handleClick" v-else> <el-tab-pane label=...
vue+element ui实现树形表格
最新发布
09-06
Vue Element UI可以通过使用Element UI的Table组件和El-Tree组件来实现树形表格。 首先，我们需要在Vue项目中引入Element UI库。可以通过npm安装Element UI，并在main.js中引入所需的组件。 接下来，在Vue组件中使用Table组件来实现表格的基本结构。设置表格的列数据，并定义表格的数据源。 然后，在Table组件中使用scoped slot来自定义每个单元格的内容。在需要显示树形结构的列中，我们可以使用El-Tree组件来渲染树形图标和文字。 在实现树形结构时，可以使用Element UI提供的treeData结构来描述数据的层级关系。通过设置每个节点的label和children属性，可以实现树形结构的展示。 另外，Element UI还提供了一些treeProps属性来自定义树形结构的样式。例如，可以通过设置indent属性来控制每一层级的缩进距离，即树形结构的层级感。 最后，可以在表格中使用一些Element UI提供的方法和事件来实现树形表格的交互功能。例如，可以通过调用this.$refs.table.toggleRowExpansion(rowData)来展开或收起某一行的子节点。 总结，通过使用Element UI的Table组件和El-Tree组件，我们可以很方便地实现树形表格。只需要设置表格的列数据和数据源，以及自定义每个单元格的内容，就可以展示出树形结构的表格。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值