elementui下拉框联动(Element树形控件整合带图标的下拉菜单tree+dropdown+input)
类别:编程学习 浏览量:2385
时间:2021-10-03 01:52:41 elementui下拉框联动
Element树形控件整合带图标的下拉菜单tree+dropdown+input目录
- 需求说明:
- 实现步骤:
本文主要讲述:自定义树形控件<el-tree>
Element UI 官网提供的树形控件包含基础的、可选择的、自定义节点内容的、带节点过滤的以及可拖拽节点的树形结构 如下:
我想要的效果是支持搜索效果的树,将鼠标悬浮后显示添加修改图标,点击图标后弹出对应页面;并且在每个文件夹前添加自定义图标。
实现效果:
实现步骤:1、使用插槽(slot)
<el-col :span="4" :xs="24"> <!--目录搜索功能--> <li class="head-container"> <el-input v-model="dirNameCn" placeholder="请输入目录名称" clearable size="small" prefix-icon="el-icon-search" style="margin-bottom: 20px" /> </li> <!--树的展示--> <li class="head-container"> <el-tree :data="dirTreeOptions" :props="defaultProps" :expand-on-click-node="false" :filter-node-method="filterNode" ref="tree" default-expand-all @node-click="handleNodeClick" icon-class="el-icon-folder-opened" node-key="id" :check-on-click-node="true" > <!--隐藏的新增等图标--> <span class="custom-tree-node" slot-scope="{ node, data }" @mouseenter="mouseenter(data)" @mouseleave="mouseleave(data)"> <span>{{ node.label }}</span> <li> <i v-show="data.show" class="el-icon-circle-plus" style="color: #00afff" @click="addDial(node, data)"/> <!--隐藏的下拉选--> <el-dropdown trigger="click" placement="right" @command="(command) => {handleCommand(command)}"> <i v-show="data.show" class="el-icon-more" style="color: #D3D3D3"/> <el-dropdown-menu slot="dropdown"> <el-dropdown-item command="a">重命名</el-dropdown-item> <el-dropdown-item command="b">删除</el-dropdown-item> </el-dropdown-menu> </el-dropdown> </li> </span> </el-tree> </li> </el-col>
2、组件对应的JS
注意:树的数据是从后端查询回来的,保存在dirTreeOptions
里面
<script> export default { name: 'reqmdoctree', data() { return { // 左侧搜索框内容 dirNameCn: '', // 目录树选项 dirTreeOptions: undefined, defaultProps: { children: "children", label: "label" }, // 树形菜单中有无子节点 yesChild: undefined, // 控制左侧新增提示信息框 show: 0, // 查询需求文档信息参数 queryParams: { docNo: undefined, // 文档编号 docNameEn: undefined, // 文档英文名称 dirNo: undefined,// 目录编号 current: 1, // 当前页数 size: 20 // 每页显示多少条 }, treeId: undefined, } }, methods: { /** 查询需求目录下拉树结构 */ getTreeselect() { treeselect().then(response => { this.dirTreeOptions = response.data }) }, // 搜索值为过滤函数 filterNode(value, data) { if (!value) return true return data.label.indexOf(value) !== -1 }, // 节点被点击时的回调函数 handleNodeClick(data) { // console.log(data) this.treeId = data.id this.yesChild = data.children this.queryParams.dirNo = data.id this.getList() }, // 树中三个点的事件 handleCommand(command) { if (command == 'a') { selectReqNo(this.treeId).then(response => { this.uuid = response.msg getObjTree(response.msg).then(response => { this.form = response.data this.open = true this.title = '修改需求文档目录配置表' }) }) } if (command == 'b') { if (this.yesChild != undefined) { this.$notify.error({ title: '警告', message: '此目录下还有别的文件夹' }) } else { selectReqNo(this.treeId).then(response => { this.uuid = response.msg this.$confirm('是否确认删除ID为' + this.uuid + '的数据项?', '警告', { confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning' }).then(()=>{ return delObjTree(this.uuid) }).then(data => { this.getTreeselect() this.msgSuccess('删除成功') }).catch(function() { }) }) } } }, // 左侧新建目录/文件 addDial(node, data) { // console.log(node, '---', data) this.reset() this.form.dirParentId = data.id this.open = true this.title = '添加需求文档目录配置表' }, // 左侧鼠标悬浮展示图标 mouseenter(data){ this.$set(data, 'show', true) }, // 左侧鼠标离开不展示图标 mouseleave(data){ this.$set(data, 'show', false) }, //打开新增资源弹窗 这里略...... } } </script>
说明:
参考文档:element UI、树形控件整合下拉选
到此这篇关于Element树形控件整合带图标的下拉菜单(tree+dropdown+input)的文章就介绍到这了,更多相关Element带图标的下拉菜单内容请搜索开心学习网以前的文章或继续浏览下面的相关文章希望大家以后多多支持开心学习网!
您可能感兴趣
- elementui多个组件怎么使用(ElementUI在实际项目使用步骤详解)
- php和xml有什么关系(PHP创建XML的方法示例基于DOMDocument类及SimpleXMLElement类)
- vue项目有element插件(Vue Element前端应用开发之前端API接口的封装)
- vue element admin接口(Vue-Element-Admin集成自己的接口实现登录跳转)
- vue3.0安装element(vue3+electron12+dll开发客户端配置详解)
- vueelementui表格操作(Vue组件库ElementUI实现表格列表分页效果)
- vueelementui侧边栏(Vue Element UI自定义描述列表组件)
- vueelementui动态表格(Vue Element前端应用开发之常规的JS处理函数)
- vue使用elementui框架(总结Vue Element UI使用中遇到的问题)
- vue3.0全家桶教程elementui学习(vite+vue3.0+ts+element-plus快速搭建项目的实现)
- vue elementui 按钮样式修改(vue+elementui 实现新增和修改共用一个弹框的完整代码)
- vue项目引入element页面(vue-element-admin项目导入和导出的实现)
- vue element 权限管理(Vue Element前端应用开发之功能点管理及权限控制)
- vueelementui组件生成页面(Vue Element前端应用开发之树列表组件)
- elementuivue使用技巧(Vue Element前端应用开发之常规Element界面组件)
- element-ui如何关闭表单验证(ElementUI实现el-form表单重置功能按钮)
- 大女主 汤唯垂青电视圈,搭档朱亚文出演《大明皇妃孙若微传》(汤唯垂青电视圈)
- 红色代表什么(红色代表什么情感和含义)
- 高中数学题(高中数学题型总结及解题方法)
- 冰岛旅游攻略(冰岛旅游攻略及花费)
- 为什么现在年轻人越来越喜欢买衣服(为什么现在年轻人越来越喜欢买衣服穿)
- 怎么做好SEO(怎么做好seo内容优化)
热门推荐
- dataset用法
- mysql读写分离同步策略(Mysql主从复制与读写分离图文详解)
- centosdocker镜像安装mysql(linux下利用Docker安装mysql的步骤)
- nginx负载均衡高怎么用(Nginx + consul + upsync 完成动态负载均衡的方法详解)
- sql怎么写递归(sql server实现递归查询的方法示例)
- mysql导出数据的方法
- java怎么调用支付宝的扫码支付(python实现银联支付和支付宝支付接入)
- extjs anchor 锚点布局
- laravel mysql 操作方式(Laravel使用原生sql语句并调用的方法)
- php中类的属性含义(php类中static与self的使用区别浅析)
排行榜
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9