Element Tree 树形控件自定义显示样式与hover事件绑定实现添加、删除和修改

最近在搞erp项目对应后台的管理功能，为了加速开发使用了 vue-element-admin 开发,使用的是elementUi框架,在项目中使用element的树形控件的时候遇到点问题,分享给大家。
首先先了解一下树形控件: elementTree 树形控件.

我的项目需求是实现鼠标hover上去的时候在对应的树形结构后面显示添加修改和删除并实现功能,查看了对应element文档刚好有类似的功能,

这个自定义结点内容写的也未免有点太唐突了点…要完成项目需求是远远不够的,再往下找,没有了
当我尝试使用element的自定义结点,给对应的结点添加v-show="false"发现却并没有起作用,怀疑是自己写法错误,找一个案例测了一下,不是我的问题,想起来曾经使用过iview脚手架,也做过类似的操作于是找了出来.修改一下完成了需求

   <--这是我的树形控件--> <el-tree :data="data4" show-checkbox node-key="value" default-expand-all :expand-on-click-node="false" :render-content="renderContent"></el-tree>

renderContent 是自定义显示的回掉绑定的data4是参照element但是我让添加了一个is_show 字段,后来想想可以使用本地中间变量来判断

renderContent(h, {node,data,store}) {return h('span', {style: {
//                      color: "red",},//这里添加hover事件on: {'mouseenter': () => {data.is_show = true;},//鼠标离开'mouseleave': () => {data.is_show = false;}}}, [h('span', {//显示名称}, node.label),h('span', {style: {display: data.is_show ? '' : 'none',},}, [//添加h('el-button', {props: {type: 'text',size: 'small',},style: {marginLeft:"15px",},on: {click: () => {this.append(data)}}}, "添加"),h('el-button', {props: {type: 'text',size: 'small',},style: {},on: {click: () => {this.amend(data)}}}, "修改"),h('el-button', {props: {type: 'text',size: 'small',},style: {},on: {click: () => {this.remove(node, data)}}}, "删除"),]),]);}

这些工作做完了来看一下效果(数据仅为模拟数据)

大功告成,添加,修改,和删除就简单了这里就不贴出来了,
另外,在添加鼠标事件的时候还遇到一个问题,比如click事件这样写

on: {click: () => {this.append(data)}}

但是鼠标事件就得添加"",

on: {'mouseenter': () => {data.is_show = true;},//鼠标离开'mouseleave': () => {data.is_show = false;}}

还是有点坑的…!

Element Tree 树形控件自定义显示样式与hover事件绑定实现添加、删除和修改相关推荐

vue+element tree(树形控件数据格式)组件(1)
vue+element tree(树形控件数据格式)组件(1), 最近做了第一个组内可以使用的组件,虽然是最简版,也废了不少力.各位前辈帮我解决问题,才勉强搞定.让我来记录这个树形组件的编写过程和期间 ...
elementui树状菜单tree_Vue+Element UI 树形控件整合下拉功能菜单（tree + dropdown +input）...
这篇博客主要介绍树形控件的两个小小的功能: 下拉菜单输入过滤框以CSS样式为主,也会涉及到Vue组件和element组件的使用. 对于没有层级的数据,我们可以使用表格或卡片来展示.要展示或建立层级 ...
Element ui tree树形控件获取当前节点id和父节点id
低版本Element ui tree树形控件获取当前节点id和父节点id的方法:点击查看最新版本Element ui tree树形控件获取当前节点id和父节点id教程: 1.找到node_modul ...
elementui tree获取父节点_vue_elementUI_ tree树形控件获取选中的父节点ID
一, vue_elementUI_ tree树形控件 1.1默认点击tree节点的第一个(注意不是checked选中) :expand-on-click-node="false" ...
vue 树形控件可编辑_vue.js element-ui组件改iview 第一期 tree树形控件
此为第一期修改,后期也适配了其他组件,更多查看我得文章 element-ui组件的tree树形控件修改源码改为iview组件实现原理修改了element-ui源码,把源码里面的tree模块提取出来 ...
React 组件封装之 Tree 树形控件
React 组件封装之 Tree 树形控件一.Tree 树形结构二.使用案例三.API 使用指南四.源代码五.总结一.Tree 树形结构组件说明: 实现树形控件,适用于组织架构.文章列表 ...
《实用VC编程之玩转控件》第15课：Tree树形控件
本文转载自:VC驿站 https://www.cctry.com/thread-297465-1-1.html 1.控件简介: Tree树形控件也是我们编程过程中比较常用的一个控件,而且在其他软件中也 ...
Element UI-给树形控件添加图标
Element UI-给树形控件添加图标 element ui 提供的树形控件默认是不支持添加图标的,如下所示: 如果要想要在节点自定义树形控件的图标,可以使用slot-scope,代码如下: 其代码 ...
Element-UI实现Tree 树形控件节点添加图标
Element-UI实现Tree 树形控件节点添加图标: 属于自定义节点内容,可以通过两种方法进行树节点内容的自定义:render-content 和 scoped slot. 1.scoped s ...

Element Tree 树形控件自定义显示样式与hover事件绑定实现添加、删除和修改

Element Tree 树形控件自定义显示样式与hover事件绑定实现添加、删除和修改

Element Tree 树形控件自定义显示样式与hover事件绑定实现添加、删除和修改相关推荐

最新文章

热门文章