验证实现element-ui树形控件的自定义图标及右键菜单

 

 

许久不用，element-ui已经更新至2.4.1版本。直接进入今天的正题，前提是node.js的环境还有vue及elment-ui都已经安装。由于element-ui的官方文档中介绍比较粗略，试了许久才成功，因此将其记录。（PS:属性控件的另一个开源插件库有Z-tree，功能较为丰富）

首先看到自定义节点内容部分，指明了可以在节点区添加按钮或图标。

一 添加节点自定义图标

但所有的实例中却没有看到有图标，自定义部分只有通过按钮增加/删除节点。于是在线运行该实例，在数据项中添加icon，于html中引用，成功了： 
HTML:

div id="app">
  <div class="block">
  /* 自定义节点的有两种方法，直接通过slot-scope实现，就不再捣腾另一种方法了，想必也是大同小异 */
    <p>使用 scoped slot</p>
    <el-tree :data="data5" node-key="id" default-expand-all :expand-on-click-node="false">
      <span class="custom-tree-node" slot-scope="{ node, data }">
        <span> <i :class="node.icon"></i>{{ node.label }}</span>
        <span>
          <el-button type="text" size="mini" @click="() => append(data)">
            Append
          </el-button>
          <el-button type="text" size="mini" @click="() => remove(node, data)">
            Delete
          </el-button>
        </span>
      </span>
    </el-tree> 
  </div>
</div>

JS:

data() {
      const data = [{
        id: 1,
        icon:"el-icon-delete",
        label: '一级 1',
        children: [{
          id: 4,
          label: '二级 1-1',
          children: [{
            id: 9,
            icon:'el-icon-info',
            label: '三级 1-1-1'
          }, {
            id: 10,
            label: '三级 1-1-2'
          }]
        }]
      }, {
        id: 2,
        label: '一级 2',
        children: [{
          id: 5,
          label: '二级 2-1'
        }, {
          id: 6,
          label: '二级 2-2'
        }]
      }, {
        id: 3,
        label: '一级 3',
        children: [{
          id: 7,
          label: '二级 3-1'
        }, {
          id: 8,
          label: '二级 3-2'
        }]
      }];
      return {
        data5: JSON.parse(JSON.stringify(data))
      }
    },

    methods: {
      append(data) {
        console.log("当前data为：",data);
        const newChild = { id: id++, label: 'testtest', children: [] };
        if (!data.children) {
          this.$set(data, 'children', []);
        }
        data.children.push(newChild);
      },

      remove(node, data) {
        const parent = node.parent;
        const children = parent.data.children || parent.data;
        const index = children.findIndex(d => d.id === data.id);
        children.splice(index, 1);
      }
    }

CSS:

.custom-tree-node {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    padding-right: 8px;
  }

 

 通过数据项来添加，不同的节点都可设置个性图标。同样数据源的动态变化也可以动态生成资源树。 

二 右键事件实现右键菜单项

查看Tree树形组件的属性、方法及事件说明，支持node-click节点点击事件，还有node-contextmenu右键点击触发的事件。 
1. 右键事件的参数为：event、data属性数组中节点所对应的对象、节点对应的Node及节点组件本身。看起来比较抽象，我们绑定实现一个右键事件，打印出对应的参数看一看就知道了。

在上图的资源树上，当点击“一级1”节点时，打印输出参数：

粗略知道参数1，是一个点击事件，包括了点击的位置信息；参数2是一个对象；后面两个参数也是一个对象。我们详细的展开四个参数具体内容：

参数1 

MouseEvent中包含的有是否冒泡、相对于浏览器及页面的点击位置等等。右键菜单很明显我肯定要用到位置参数。

参数2 

然后可以看到当前节点所对应的node,本身的icon，id及label，此外还有子节点信息children，可以看到有一个——二级1-1（包括它的id、label等），且子节点下还有两个子节点，及设置节点的一些原生方法。

参数3 

这里则是被点击当前树形节点的本质属性，包括是否有选择框checked、data、是否展开expanded及id等，其中用红线圈出的几个地方我觉得是比较有用的，我们可以通过判断是否是子节点及节点的层级，定义不同层级或者节点的不同行为。例如，可能我们的右键菜单只在某些资源树节点上有用。

参数4（没有深究，暂时没有用到） 

2. 前面不是还发现了节点的点击事件node-click，于是猜想node-click和node-contextmenu冲突，点击右键的时候会不会也出发了node-click。验证之后发现担心是多余的，node-click只是针对于鼠标左键，因为点击右键时node-click事件并没有被触发。

在HTML中添加菜单项：

<div v-show = "menuVisible">
    <ul id = "menu">
      <li tabindex="-1" class="menu__item" id="menu-4994-1-0">Axure Components</li>
      <li tabindex="-1" class="menu__item" id="menu-4994-1-1">Sketch Templates</li>
      <li tabindex="-1" class="menu__item" id="menu-4994-1-2">组件交互文档</li>
    </ul>
  </div>

且在vue数据项中定义menuVisible:false，el-tree上绑定node-contextmenu事件，在js中实现如下：

rihgtClick(event,object,value,element){
        if(value.level == 1){
          this.menuVisible = true;
          let menu = document.querySelector("#menu");
        /* 菜单定位基于鼠标点击位置 */
          menu.style.left = event.clientX + 20 + "px" ;
          menu.style.top = event.clientY -10 + "px";
        }

        console.log("右键被点击的event:",event);
        console.log("右键被点击的object:",object);
        console.log("右键被点击的value:",value);
        console.log("右键被点击的element:",element);

      },

于是只有在点击一级节点时，右键才会出现菜单项。正如上图中所验证的一样，点击二级节点时，我们可以看到打印信息位置明显在下面且没有出现菜单项。（PS：由于还没有做菜单的隐藏，所以点击二级节点时，之前的菜单还是存在于原来的位置^ ^）