elementui树状菜单tree_Vue+Element UI 树形控件整合下拉功能菜单（tree + dropdown +input）...

最新推荐文章于 2024-04-02 14:36:29 发布
VIP文章 最新推荐文章于 2024-04-02 14:36:29 发布
阅读量1k 收藏
点赞数
文章标签： elementui树状菜单tree
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_39548606/article/details/111537141
版权

这篇博客主要介绍树形控件的两个小小的功能：

下拉菜单

输入过滤框

以CSS样式为主，也会涉及到Vue组件和element组件的使用。

对于没有层级的数据，我们可以使用表格或卡片来展示。要展示或建立层级关系，就一定会用到树形组件了。

使用Vue + Element UI，构建出最基本的树如下图所示：

最简单的树结构

现在我们就要在这个基础上进行改造，使页面更加符合我们的交互场景。

一、下拉菜单

将下拉菜单嵌到树节点中，使操作更加简便、紧凑。

效果演示

效果如图：

图示1：悬浮在树节点状态

悬浮在树节点状态

图示2：点击三个点图标状态

点击三个点图标状态

图示3： 选中并选择菜单

下拉菜单效果

如上，当鼠标悬浮在树节点上时，出现竖着的三个小点，点击时弹出下拉菜单，显示可以对树节点进行的操作。

实现步骤

1、使用插槽(slot) + 子组件

父组件(含有树形控件)模板代码

:highlight-current="true" :check-on-click-node=&

最低0.47元/天 解锁文章
weixin_39548606
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue+Element UI 树形控件整合下拉功能菜单（tree + dropdown +input）
01-19
这篇博客主要介绍树形控件的两个小小的功能： 下拉菜单 输入过滤框 以CSS样式为主，也会涉及到Vue组件和element组件的使用。 对于没有层级的数据，我们可以使用表格或卡片来展示。要展示或建立层级关系，就一定会用到树形组件了。 使用Vue + Element UI，构建出最基本的树如下图所示： 现在我们就要在这个基础上进行改造，使页面更加符合我们的交互场景。 下拉菜单 将下拉菜单嵌到树节点中，使操作更加简便、紧凑。 效果演示 效果如图： 图示1：悬浮在树节点状态 图示2：点击三个点图标状态 图示3： 选中并选择菜单 如上，当鼠标悬浮在树节点上时，出现竖着的三个小
elementui树状菜单tree_Java + Element-UI 实现简单的树形菜单
weixin_39867559的博客
12-19 755
一、简单入门级树形菜单实现(纯后台逻辑)1、简介(1)开发环境IDEA + JDK1.8 + mysql 1.8SpringBoot 2.2.6 + mybatis-plus此处仅后台开发(返回 json 数据)，前台页面展示后续会讲解。(2)数据表如下，仅供参考，可以添加 修改时间、创建时间、逻辑删除等字段。DROP DATABASE IF EXISTS test;CREATE DATABASE...
【Vue入门实践】Element-UI 树形组件el-tree的组件封装 =＞实现组织机构树Tree =＞ 使用vue-content-menu定制可编辑树结构editableTree
最新发布
2401_83974227的博客
04-02 591
params: {username: “”, // 用户名orgId: “”, // 组织机构idstatus: “”, // 状态，0：禁用，1：启用pageNum: 1, // 当前第几页pageSize: 10, // 每页数量total: 0, // 总记录数},好了，这就是整理的前端从入门到放弃的学习笔记，还有很多没有整理到，我也算是边学边去整理，后续还会慢慢完善，这些相信够你学一阵子了。
vue项目中使用element-ui封装菜单树
是一座岛
08-20 3263
一. 效果图 底层使用el-menu菜单组件，项目中要求动态获取菜单树，并且层级不固定。所以就在el-menu组件基础上封装了一下。 二. 实现代码 SideBar.vue 文件 <template> <el-aside width="200px" style="background-color: #F3F6F9"> <el-menu :...
组件Element-UI 2实现树形下拉选择框--详解（含代码&示例）
热门推荐
qq_53322872的博客
05-14 1万+
通过element-ui 2的方式实现树形下拉选择框的效果
element-ui ＜el-input＞ +＜el-tree＞使用
计算机辅助工程
08-30 1838
<template> <!-- 需求:通过点击<el-input> 将<el-tree>树型结构打开，选中<el-tree>某个值显示在<el-input>里面(中文)，点击搜索将<el-input>的值传给后台，后台需要中文对应的id;前端显示中文，后台传入Number --> <div class="demo"> <el-input placeholder="前端显示中文
elementui el-input和el-tree组件联合使用
xiaotiaoza的博客
11-09 2135
elementui el-input和el-tree组件联合使用
vue + element ui工程，Tree 树形控件展示指定值，比如name
03-09
介绍如何使用指定值去渲染树，默认label，现改为name值
vue.js+element-ui动态配置菜单的实例
10-18
今天小编就为大家分享一篇vue.js+element-ui动态配置菜单的实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
thinkphp6_vue+elementUi后台基础管理框架.zip
11-14
基础路由前后一起存储，用户登录后从后端获取菜单权限，再由前段生产路由。这样前端不用编写路由。缺点是添加菜单需要注意使用公用的index和base。基础的用户管理，角色管理，账号管理，登录，退出，个人信息。 运行...
vue使用element-ui el-input+el-tree
weixin_46463643的博客
10-24 1322
简介：主要为树形下拉框选择数据对应input展示值 效果图 html <el-form :v-model="form"> <el-form-item> <el-input placeholder="请选择菜单分类" class="selectTree-input" auto-complete="off" v-model="form.inp
element-ui导航菜单(el-menu)实现树形结构侧边栏
Hui-1018的博客
09-27 8700
提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档 文章目录前言1、先上效果图2、具体实现2.1 定义Menu组件2.2 定义Slider组件，及树结构数据处理总结 前言 提示： 一般侧边菜单数据都是静态、少量数据。如何实现动态可配置？ 可以通过接口返回的树形结构数据动态更新菜单条目 1、先上效果图 树形结构数据（模拟数据，实际开发中通过后台接口获取即可） [ { "nodeid": "777718a5-18a8-4955-928a-64b683513
Element-UI控件Tree实现数据树形结构
觉醒法师的专栏
03-29 5393
在前端开发中，有时会遇到所有菜单数据在同一级的情况，后端未对数据进行分级处理；但前端渲染需要是树状结构的数据，如何实现数据的树状化？将数组中通过父节点的ID与子节点的parentId关联，通过递归函数来实现。前端框架这里使用element-ui的tree控件来实现，对其不了解可以去官网查看文档。
element自定义下拉框组件，使用el-input和el-tree封装下拉树
zyxczyf123的博客
05-28 1903
封装SelectTree下拉选择树 有时候我们需要再select中嵌套一个Tree组件，如下这样： 代码如下 <template> <div> <el-popover placement="bottom-start" v-model="popover" trigger="click" > <el-input sty
element-ui 树形控件el-tree右键自定义菜单实现节点增删改
Luo_LA的博客
01-13 1万+
效果展示： 实现步骤： 展示树形文件夹 @node-contextmenu=“floderOption”：element-ui定义的右键点击事件 data为element-ui中自带的json格式的数据 <el-tree :data="data" draggable node-key="id" @node-contextmenu="floderOption"> <span class="custom-tree-node" slot-scope="{ node, data }"&g
elementUI树结构Tree修改/编辑原节点变为input输入框
DDD4V的博客
05-24 5610
思路分析 点击修改，节点由span变input，input中显示的内容为原节点内容，并获得焦点全选 修改后，失去焦点，由input变回span,节点内容修改 <h4>那这样我们需要一个数据内容来控制input和span切换的值</h4> 数据内容 . 在接口返回的数据中，添加showInput字段，来控制什么时间切换节点标签 Html结构 <el-tree class="tree" :data="t
【Vue项目实战8】资源树el-tree的input形式【Element UI】==＞ 添加分级图标样式==＞ 选中节点显示操作栏（新建 修改 删除）==＞弹框新增 删除
Sabrina_cc的博客
06-22 1895
上一篇博客我们已经介绍过el-tree样式修改的一种了，这篇博客我们继续整理另一种el-tree样式的优化（1）CSS分层图标和分层样式（以五层为最大）（2）选中节点展示【操作栏】包含：新增子节点，修改当前节点，删除当前节点（3）选中节点 == 修改时回显选中节点和父节点；新增时展示当前节点；（4）新增一级节点（5）父节点使用若依自带的treeselect组件...
elementui树状菜单tree_vue+element-ui实现无限级动态菜单树
05-18
要实现一个无限级动态菜单树，可以使用 Element UI 的 Tree 组件。以下是一个简单的实现示例： 首先，需要在 Vue 中引入 Element UI 的 Tree 组件： ```javascript import { Tree } from 'element-ui'; ``` 然后，可以在 Vue 的模板中使用 `el-tree` 标签来渲染 Tree 组件： ```html <el-tree :data="menuData" :props="treeProps" @node-click="handleNodeClick"></el-tree> ``` 其中，`menuData` 是菜单数据，`treeProps` 是 Tree 组件的属性配置对象，`handleNodeClick` 是 Tree 组件的点击事件处理函数。 接下来，我们来看一下如何实现动态加载菜单数据。首先，需要在 Vue 的 `mounted` 生命周期中调用一个方法来获取菜单数据： ```javascript mounted() { this.getMenuData(); }, methods: { getMenuData() { // 通过接口获取菜单数据 } } ``` 接着，在菜单数据获取成功后，需要将数据转换成符合 Tree 组件要求的格式，并将数据保存在 Vue 实例的 `menuData` 属性中： ```javascript getMenuData() { // 通过接口获取菜单数据 // 将数据转换成符合 Tree 组件要求的格式 const menuData = convertMenuData(data); // 将数据保存在 Vue 实例的 menuData 属性中 this.menuData = menuData; } ``` 最后，我们来看一下如何处理 Tree 组件的点击事件。在 `handleNodeClick` 方法中，可以根据节点的 `level` 属性来判断当前节点是否为叶子节点。如果是叶子节点，则可以执行相应的操作，比如打开对应的页面；否则，需要递归获取子节点的数据并更新 Tree 组件的数据源： ```javascript handleNodeClick(node) { if (node.level === 2) { // 点击了叶子节点，执行相应操作 // 比如打开对应的页面 window.location.href = node.url; } else { // 点击了非叶子节点，递归获取子节点数据并更新 Tree 组件的数据源 const childNodes = await this.getChildNodes(node); node.children = childNodes; this.menuData = [...this.menuData]; } }, async getChildNodes(node) { // 通过接口获取子节点数据 const childNodesData = await getChildrenData(node.id); // 将数据转换成符合 Tree 组件要求的格式 const childNodes = convertMenuData(childNodesData); return childNodes; } ``` 至此，一个简单的无限级动态菜单树就实现了。完整的代码可以参考下面的示例： ```html <template> <el-tree :data="menuData" :props="treeProps" @node-click="handleNodeClick"></el-tree> </template> <script> import { Tree } from 'element-ui'; export default { components: { [Tree.name]: Tree }, data() { return { menuData: [], treeProps: { label: 'name', children: 'children' } }; }, mounted() { this.getMenuData(); }, methods: { async getMenuData() { // 通过接口获取菜单数据 const data = await getMenuData(); // 将数据转换成符合 Tree 组件要求的格式 const menuData = convertMenuData(data); // 将数据保存在 Vue 实例的 menuData 属性中 this.menuData = menuData; }, async handleNodeClick(node) { if (node.level === 2) { // 点击了叶子节点，执行相应操作 // 比如打开对应的页面 window.location.href = node.url; } else { // 点击了非叶子节点，递归获取子节点数据并更新 Tree 组件的数据源 const childNodes = await this.getChildNodes(node); node.children = childNodes; this.menuData = [...this.menuData]; } }, async getChildNodes(node) { // 通过接口获取子节点数据 const childNodesData = await getChildrenData(node.id); // 将数据转换成符合 Tree 组件要求的格式 const childNodes = convertMenuData(childNodesData); return childNodes; } } }; </script> ```

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值