element中el-tree和级联菜单

已于 2022-01-24 09:32:06 修改
阅读量1.1k 收藏
点赞数
分类专栏： Vue 文章标签： vue.js 前端 javascript
于 2022-01-24 09:29:56 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41930094/article/details/122661238
版权

个人记录

在这里插入图片描述

<template>
    <div>
        <el-container>
            <!--头-->
            <el-header style="background-color: #00c355" class="header">Header</el-header>
            <!--中-->
            <el-container>
                <div width="100%">
                    <el-input placeholder="输入关键字进行过滤" v-model="filterText" style="width: 96%;padding: 3px 2px;">
                    </el-input>
                    <el-aside class="aside" style="background-color: #3a8ee6;padding: 4px 6px;">
                        <el-tree :data="cascadeData" :props="defaultProps" @node-click="handleNodeClick"
                                 :filter-node-method="filterNode" node-key="id" :default-expanded-keys="[0]"
                                 ref="tree"></el-tree>
                    </el-aside>
                </div>
                <el-main style="background-color: #ffffff" class="main">
                    <!--岗位级联单选组件  value:'id'作用：当change事件触发时，选中节点拿当前节点的id值！:show-all-levels="false" ：输入框中是否显示选中值的完整路径 -->
                    <el-cascader :options="cascadeData"  v-model="jobCacader"
                                 :props="{ checkStrictly: true,...defaultProps2,value:'id'}" @change="jobCascaderChange" filterable
                                 :show-all-levels="false"   clearable>
                    </el-cascader>
                </el-main>
            </el-container>
            <!--尾-->
            <el-footer style="background-color: #eeeeee" class="footer">Footer</el-footer>
        </el-container>
    </div>
</template>

<script>
    import Vue from '@/main';

    export default {
        name: "test.component.vue",
        data() {
            return {
                cascadeData: [],//1.el-tree树数据 2. 岗位级联数据
                defaultProps: {
                    children: 'children',//
                    label: 'nameCn'//el-tree显示标签
                },
                defaultProps2: {
                    children: 'children',//
                    label: 'nameCn2'//el-cacader级联菜单显示标签
                },
                filterText: '',//input输入框
                jobCacader:[0,10859],//级联选择器的ngmodel值
            }
        },

        watch: {
            filterText(val) {
                this.$refs.tree.filter(val);
            },

            jobCacader(){
                //岗位ID,
            }
        },

        methods: {
            /**
             * Auto:Greg_Zhong
             * uodateDate:2022-1-22
             * 查询所有岗位
             * 岗位ID：id、岗位名称：nameCn、部门名称：departmentId、父部门ID：pId
             */
            queryJob() {
                Vue.$Request({
                    method: 'post',
                    url: '/api/hkc-mdm-organizational-structure/post/list',
                    data: {},
                    params: {}
                }).then((res) => {
                    if (res.data.code === 200) {
                        // console.log("岗位数据：", JSON.stringify(res.data.data.dataList));

                        //将从服务器返回扁平化数据，转换成el-tree数据结构/ 级联数据
                        this.cascadeData = this.setTreeData(res.data.data.dataList);
                        //默认选中el-tree
                        // this.$nextTick(() => {
                        //     document.querySelector('.el-tree-node__content').click();
                        // });
                    } else {
                        console.warn("请求岗位数据失败,服务器返回状态码：", res.data.code);
                    }
                }).catch(error => {
                    this.original = [
                        {
                            "id": 10047,
                            "opCode": null,
                            "useStatus": 1,
                            "departmentId": 30758,
                            "nameCn": "测试数据1124",
                            "nameEn": null,
                            "pinyinSimple": null,
                            "pinyin": null,
                            "director": 0,
                            "postType": null,
                            "effectiveDate": null,
                            "expiryDate": null,
                            "memo": null,
                            "reportType": "HBLX01_SYS",
                            "pId": null,
                            "createTime": "2021-11-24 14:39:47",
                            "createUserId": null,
                            "updateTime": null,
                            "updateUserId": null,
                            "other": null,
                            "field1": null,
                            "field2": null,
                            "field3": null,
                            "departmentName": "数字化管理中心"
                        }, {
                            "id": 10011,
                            "opCode": null,
                            "useStatus": 1,
                            "departmentId": 30754,
                            "nameCn": "电商部长",
                            "nameEn": null,
                            "pinyinSimple": null,
                            "pinyin": null,
                            "director": 0,
                            "postType": null,
                            "effectiveDate": "2001-01-01 00:00:00",
                            "expiryDate": "2001-01-01 00:00:00",
                            "memo": "无",
                            "reportType": null,
                            "pId": null,
                            "createTime": "2021-11-24 14:37:05",
                            "createUserId": null,
                            "updateTime": null,
                            "updateUserId": null,
                            "other": null,
                            "field1": null,
                            "field2": null,
                            "field3": null,
                            "departmentName": "人力资源中心"
                        }, {
                            "id": 10010,
                            "opCode": null,
                            "useStatus": 1,
                            "departmentId": 30754,
                            "nameCn": "信息主管",
                            "nameEn": null,
                            "pinyinSimple": null,
                            "pinyin": null,
                            "director": 0,
                            "postType": null,
                            "effectiveDate": "2001-01-01 00:00:00",
                            "expiryDate": "2001-01-01 00:00:00",
                            "memo": null,
                            "reportType": null,
                            "pId": null,
                            "createTime": "2021-11-24 14:37:03",
                            "createUserId": null,
                            "updateTime": null,
                            "updateUserId": null,
                            "other": null,
                            "field1": null,
                            "field2": null,
                            "field3": null,
                            "departmentName": "人力资源中心"
                        }, {
                            "id": 10006,
                            "opCode": null,
                            "useStatus": 1,
                            "departmentId": 30754,
                            "nameCn": "行政管理",
                            "nameEn": null,
                            "pinyinSimple": null,
                            "pinyin": null,
                            "director": 1,
                            "postType": null,
                            "effectiveDate": null,
                            "expiryDate": null,
                            "memo": null,
                            "reportType": null,
                            "pId": null,
                            "createTime": "2021-11-24 14:37:01",
                            "createUserId": null,
                            "updateTime": null,
                            "updateUserId": null,
                            "other": null,
                            "field1": null,
                            "field2": null,
                            "field3": null,
                            "departmentName": "人力资源中心"
                        }, {
                            "id": 10005,
                            "opCode": null,
                            "useStatus": 1,
                            "departmentId": 30754,
                            "nameCn": "电商客服专员",
                            "nameEn": null,
                            "pinyinSimple": null,
                            "pinyin": null,
                            "director": 1,
                            "postType": null,
                            "effectiveDate": null,
                            "expiryDate": null,
                            "memo": null,
                            "reportType": null,
                            "pId": null,
                            "createTime": "2021-11-24 14:37:00",
                            "createUserId": null,
                            "updateTime": null,
                            "updateUserId": null,
                            "other": null,
                            "field1": null,
                            "field2": null,
                            "field3": null,
                            "departmentName": "人力资源中心"
                        }, {
                            "id": 10004,
                            "opCode": null,
                            "useStatus": 1,
                            "departmentId": 30758,
                            "nameCn": "信息专员",
                            "nameEn": null,
                            "pinyinSimple": null,
                            "pinyin": null,
                            "director": 1,
                            "postType": null,
                            "effectiveDate": null,
                            "expiryDate": null,
                            "memo": null,
                            "reportType": null,
                            "pId": 10000,
                            "createTime": "2021-11-16 11:13:46",
                            "createUserId": null,
                            "updateTime": null,
                            "updateUserId": null,
                            "other": null,
                            "field1": null,
                            "field2": null,
                            "field3": null,
                            "departmentName": "数字化管理中心"
                        }, {
                            "id": 10003,
                            "opCode": null,
                            "useStatus": 1,
                            "departmentId": 30758,
                            "nameCn": "软件测试",
                            "nameEn": null,
                            "pinyinSimple": null,
                            "pinyin": null,
                            "director": 1,
                            "postType": null,
                            "effectiveDate": null,
                            "expiryDate": null,
                            "memo": null,
                            "reportType": null,
                            "pId": 10000,
                            "createTime": "2021-11-16 11:13:44",
                            "createUserId": null,
                            "updateTime": null,
                            "updateUserId": null,
                            "other": null,
                            "field1": null,
                            "field2": null,
                            "field3": null,
                            "departmentName": "数字化管理中心"
                        }, {
                            "id": 10002,
                            "opCode": null,
                            "useStatus": 1,
                            "departmentId": 30758,
                            "nameCn": "软件开发",
                            "nameEn": null,
                            "pinyinSimple": null,
                            "pinyin": null,
                            "director": 1,
                            "postType": null,
                            "effectiveDate": null,
                            "expiryDate": null,
                            "memo": null,
                            "reportType": null,
                            "pId": 10000,
                            "createTime": "2021-11-16 11:13:43",
                            "createUserId": null,
                            "updateTime": null,
                            "updateUserId": null,
                            "other": null,
                            "field1": null,
                            "field2": null,
                            "field3": null,
                            "departmentName": "数字化管理中心"
                        }, {
                            "id": 10001,
                            "opCode": null,
                            "useStatus": 1,
                            "departmentId": 30758,
                            "nameCn": "软件架构",
                            "nameEn": null,
                            "pinyinSimple": null,
                            "pinyin": null,
                            "director": 1,
                            "postType": null,
                            "effectiveDate": null,
                            "expiryDate": null,
                            "memo": null,
                            "reportType": null,
                            "pId": 10000,
                            "createTime": "2021-11-16 11:13:41",
                            "createUserId": null,
                            "updateTime": null,
                            "updateUserId": null,
                            "other": null,
                            "field1": null,
                            "field2": null,
                            "field3": null,
                            "departmentName": "数字化管理中心"
                        }, {
                            "id": 10000,
                            "opCode": null,
                            "useStatus": 1,
                            "departmentId": 30758,
                            "nameCn": "信息总监",
                            "nameEn": null,
                            "pinyinSimple": null,
                            "pinyin": null,
                            "director": 1,
                            "postType": null,
                            "effectiveDate": null,
                            "expiryDate": null,
                            "memo": null,
                            "reportType": null,
                            "pId": null,
                            "createTime": null,
                            "createUserId": null,
                            "updateTime": null,
                            "updateUserId": null,
                            "other": null,
                            "field1": null,
                            "field2": null,
                            "field3": null,
                            "departmentName": "数字化管理中心"
                        }
                    ];
                    alert("el-tree树菜单报error信息:", error);
                    console.log("岗位el-tree树菜单报error信息:", error);
                })
            },

            //扁平化数据转el-tree树结构！
            setTreeData(data) {
                //第一步：实现岗位和子岗位层级关系
                data.forEach(function (item) {
                    delete item.children; // 删除所有的children,以防止多次调用
                });
                let map = {}; //构建map
                data.forEach(i => {
                    map[i.id] = i; //构建以id为键 当前数据为值
                });
                let treeData = [];
                data.forEach((child, index) => {
                    child.nameCn2 =  child.nameCn;// 岗位名称
                    child.nameCn = `【${child.departmentName}】` + child.nameCn;//形式：【部门名称】+岗位名称
                    var mapItem;
                    mapItem = map[child.pId]; //判断当前数据的pId是否存在map中
                    //mapItem引用了data,所以mapItem改变后，data也会改变！ 所以：这里的mapItem与child对象存在相互引用,如果使用JSON.tostringify()则会出现循环引用问题！
                    if (mapItem) {
                        (mapItem.children || (mapItem.children = [])).push(child); //这里判断mapItem中是否存在child对象
                        // console.log("会当凌绝顶伊朗总是想！", (mapItem));//这里使用comsole打印没问题，
                        // console.log("会当凌绝顶伊朗总是想！", (JSON.stringify(mapItem)));//使用JSON.tostringify就会报循环引用问题！
                    } else {
                        treeData.push(child);//不存在则是顶层岗位
                    }
                    // console.log("会当凌绝顶！",(mapItem));
                });
                // console.log('br/' + "封装成el-tree数据结构的（岗位）数组：+br/", JSON.stringify(treeData));
                //第二步：将岗位层级数组放到“恒康医药集团”下面作为children
                let resultObject = [{id: 0, nameCn: '恒康医药集团', nameCn2: '恒康医药集团', pId: null}];
                resultObject[0].children = treeData;//将封装好的岗位层级，嵌套到最外层；
                return resultObject;
            },

            //获取el-tree选中的元素
            handleNodeClick(data) {
                console.log(data);
            },

            //配合input框实现过滤元素 | 对树节点进行筛选时执行的方法，返回 true 表示这个节点可以显示，返回 false 则表示这个节点会被隐藏
            filterNode(value, data) {
                if (!value) return true;
                return data.nameCn.indexOf(value) !== -1;//注意这里data.nameCn的nameCn,需要和defaultProps.label里的键保持一致！
            },

            //岗位级联菜单，获取选中节点的元素
            jobCascaderChange(val) {
                console.log("天地广阔，任我翱翔", val);
            },
        },

        mounted() {
            //查询岗位列表
            this.queryJob();
        }

    }
</script>
<!--scoped-->
<style>

    .el-tree {
        color: #000;
    }

    .el-menu--horizontal > .el-menu-item.is-active {
        /* 顶部菜单项选中时的颜色 */
        border-bottom: 2px solid #009944;
        /* 顶部菜单栏底线颜色 */
        color: #303133;
    }

    .el-tree-node__expand-icon {
        /* 树形菜单三角标颜色 */
        color: #999;
    }

    .el-tree-node__content:hover {
        /* 树形菜单鼠标悬浮的字体颜色及背景颜色 */
        color: #ffffff;
        background-color: #009944;
    }

    .el-tree-node:focus > .el-tree-node__content {
        /* 树形菜单选中时的字体颜色及背景颜色 */
        color: #ffffff;
        background-color: #009944;
        padding: 0px 12px;;
    }

    .el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content {
        /* 树形菜单选中时的字体颜色及背景颜色 */
        color: #ffffff;
        background-color: #009944;
    }


</style>
Greg_Zhong
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
el-tree树实践
山谷里的杂货铺
12-29 379
1、弱关联+全选按钮 和强关联 <el-dialog title="选择参与对象" v-model="orgVisible" :append-to-body="false" :before-close="closeDia" > <div class="main-container"> <div class="left-container"> &...
【element-UI的BUG】树图回显级联
赵达宇的博客
06-08 1026
在解决此问题之前，我们先了解element-UI 中的 Tree 树形控件 的其中一个属性，check-strictly，官方对此属性解释是：在显示复选框的情况下，是否严格的遵循父子不互相关联的做法，默认为 false。该用户只拥有父菜单下的某一个子菜单功能，而且从后端传过来的值也是对的，但是在显示的时候，却连同父菜单一同显示了。获取级联的id方法：（也就是当我们仅勾选了子菜单，在传数据时，也要把它的父菜单id也传过去）接着，我们去后台请求得到用户拥有的菜单数据，回显数据时，关掉级联效果。
VUE element-ui之el-tree树形控件循环遍历渲染dom节点；子节点横向排列；控件添加指示线_两个el-tree的循环遍历(1)
最新发布
2301_82241847的博客
05-16 1119
我在成长过程中也是一路摸爬滚打，没有任何人的指点，所以走的很艰难。例如在大三的时候，如果有个学长可以阶段性的指点一二，如果有已经工作的师兄可以告诉我工作上需要什么，我应该前面的三年可以缩短一半；后来去面试bat，失败了有5、6次，每次也不知道具体是什么原因，都是靠面试回忆去猜测可能是哪方面的问题，回来学习和完善，当你真正去招人的时候，你就会知道面试记录是多么重要，面试官可以从面试记录里看到你的成长，总是去面试，总是没有成长，就会被定义为缺乏潜力。
el-tree：实现父节点自动关联选中、子节点自动关联取消选中功能
java web
07-19 4366
利用element plus的el-tree控件，实现选中节点时，其各级父节点自动关联选中；取消选中该节点时，其各级子节点自动关联取消选中功能
elementui tree 编辑节点_elementui的级联选择组件的使用
weixin_42342626的博客
11-30 595
查看elementui的官网，查看级联选择器： <el-cascader v-model="value" :options="options" @change="handleChange">el-cascader>在添加窗口上写 <el-form-item label="所属分类id" prop="catelogId"> &...
element ui el-tree 树形控件设置上下级严格关联
chinahcp2008的博客
08-25 1320
本方法实现以下功能： 选中上级节点时，自动选中下级所有节点； 选中下级节点时，自动选中上级所有节点； 取消上级节点选中时，自动取消下级所有节点选中状态； 取消下级节点选中时，上级状态不变 控件部分代码： <el-tree ref="myTree" node-key="id" default-expand-all show-checkbox :props="defaultMyTreeProps" :check-strictly="true" :data="myTreeData" @c
Element UI中el-tree 添加右键菜单的方法，附带问题和解决方案
2301_76707317的博客
09-22 3612
2、建立一个右键组件，可以使用 el-menu 组件，优点是，可以借助el-menu 的 selec方法进行增删改查以及样式不用手写了，弊端是不容易获取点击的Dom，先暂时这样写吧。想到的解决办法是，点击该节点时，使用原生js的 contextmenu 事件，在事件中用 e.preventDefault（）方法进行阻止。1、在el-tree 中添加方法 @node-contextmenu="rightClick"在右键弹出的组件中，点击右键，会默认弹出浏览器的右键菜单栏；3、点击树状节点时，关闭右键组件。
el-tree-selected-tree
11-15
总的来说，`el-tree-selected-tree`是Element UI中`el-tree`组件的一个增强应用，它展示了如何利用事件监听和数据绑定来实现特定的业务需求，如动态展示选中节点和在独立树上进行操作。在实际项目中，这样的功能增强...
详解element-ui级联菜单（城市三级联动菜单）和回显问题
01-19
<el label=户籍所在地 prop=censusLand xss=removed> <el-cascader v-model=ruleForm.censusLand style=width:180px;padding-left:7px;width:270px placeholder=请选择省市区 :options=cascaderData1 @...
使用element中el-cascader级联选择器：实现省市区街道筛选、动态懒加载以及回显
12-22
全国省市区街道的json数据
Excel财务行政专项模板--建立复杂级联菜单
11-24
在Excel中，建立复杂级联菜单是一项高级技巧，主要用于数据输入和管理，特别是在财务和行政工作中，能够提高数据录入的准确性和效率。级联菜单允许用户在选择一个选项后，根据该选项自动过滤或显示相关的下一级选项...
elementUI选择框、树----将select与tree配合做出级联Cascader的效果
weixin_45856221的博客
12-08 455
elementUI选择框、树----将select与tree配合做出级联Cascader的效果
element-ui中el-tree树节点的级联操作(取消子节点，父节点不变)
热门推荐
毅呀毅呀哟
04-26 1万+
首先，这个tree节点操作中，选中了父节点，会默认选中全部子节点，某个子节点没选中，那么所有父节点都为半选状态。 半选状态时，使用this.$refs.tree.getCheckedKeys()是获取不到半选状态节点的id的。 现在需求是：选中父节点，子节点全部选中，取消某个子节点，父节点不变。 关键点是@check-change事件和this.$refs.tree.setChe...
element-ui table tree 级联选择
07-07 930
element-ui 树表格的全选功能并未完全实现，利用 select 和 select-all 事件完整实现此功能
Java Web(十)：AdminLTE(中文版)的使用
yu1755128147的博客
02-14 1万+
1、AdminLTE的简介 2、AdminLTE的下载 3、AdminLTE的简单使用
el-tree大改造，自定义图标，树加线等
白白白桃乌龙的博客
07-05 2073
el-tree改造，自定义图标，树加线等
el-tree 实现鼠标移入节点，显示功能按钮
zero_wsh的博客
05-24 2173
2.因为鼠标事件是绑定到span标签（即文本）的，所以要设置高度为100%，不然会出现从一个节点移动到另一个节点时，看到是移上去了但是功能按钮未显示的bug（节点间隔越大，越容易看到）。3.通过@click.stop="()=>{}"禁用掉div部分的el-tree点击事件，实现节点事件和下拉菜单事件区分。1.通过给数据动态加入dropdownShow属性来控制功能按钮的显示和隐藏，不然鼠标移入后，所有节点都会显示功能按钮。
vue.js element-ui 级联选择器
mashirokayo的博客
10-07 402
vue.js 级联选择器 简单记录
树组件单级的（一级树组件--新建编辑-删除）
csstmg的博客
05-17 154
<el-row :gutter="10"> <el-col :span="5"> <div class="tree-wrap radius-5"> <div class="tree-hd"> <span class="custom-tree-node normal large-size">分组管理</span> </..
vue实现三级级联的el-tree懒加载树
05-31
实现三级级联的el-tree懒加载树，可以按照以下步骤进行： 1. 安装element-ui组件库，并在项目中引入el-tree组件。 ```bash npm install element-ui --save ``` ```javascript import { Tree } from 'element-ui'; export default { components: { [Tree.name]: Tree, }, } ``` 2. 创建树的数据源，并定义懒加载函数 ```javascript { label: '一级节点', id: 1, children: [], loading: false, }, { label: '二级节点', id: 2, children: [], loading: false, }, { label: '三级节点', id: 3, children: [], loading: false, } async loadNode(node, resolve) { if (node.level === 0) { return resolve([ { label: '一级节点', id: 1, children: [], loading: false, } ]) } if (node.level === 1) { node.loading = true; const children = await getChildren(node.id); node.loading = false; children.forEach(child => { child.loading = false; child.children = []; }) return resolve(children) } if (node.level === 2) { node.loading = true; const children = await getChildren(node.id); node.loading = false; children.forEach(child => { child.loading = false; child.children = []; }) return resolve(children) } }, ``` 3. 在模板中使用el-tree组件，并绑定数据源和懒加载函数 ```html <el-tree :data="data" :load="loadNode" :lazy="true" > </el-tree> ``` 这样就可以实现三级级联的el-tree懒加载树了。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值