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;
						}
					}

还是有点坑的…!