vue element-ui-tree样式总结

　　项目要实现一个右键点击tree节点弹出菜单的需求。（暂时没做出来，后续待更新）。

1.从element里面找到了自定义的。（详见UI中tree自定义节点内容）。

2.直接上代码。

renderContent (h, { node, data, store }) {
      return h('span', {
        style: {
          color: '#606266'
        },
        on: {
          // 'contextmenu': () => {
          //   Vue.set(data, 'is_show', true);
          // },
          'mouseenter': () => {
            // Vue.set(data, 'is_show', true);
          },
          'mouseleave': () => {
            // Vue.set(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.addSubClassify('addSub');
                Vue.set(data, 'is_show', false);
              }
            }
          }, '新增子分类'),
          h('el-button', {
            props: {
              type: 'text',
              size: 'small'
            },
            style: {

            },
            on: {
              click: () => {
                this.editClassify('editSub');
                Vue.set(data, 'is_show', false);
              }
            }
          }, '编辑分类'),
          h('el-button', {
            props: {
              type: 'text',
              size: 'small'
            },
            style: {

            },
            on: {
              click: () => {
                this.deleteClassify('deleteClassify');
                Vue.set(data, 'is_show', false);
              }
            }
          }, '删除分类'),
          h('el-button', {
            props: {
              type: 'text',
              size: 'small'
            },
            style: {

            },
            on: {
              click: () => {
                this.addTable();
                Vue.set(data, 'is_show', false);
              }
            }
          }, '新增表')
        ])
      ]);
    },

3.摘自网上相关参考链接。

1）https://blog.csdn.net/Bonjourjw/article/details/80805463

2）https://blog.csdn.net/bonjourjw/article/details/81108951

3）https://blog.csdn.net/wxfdpp/article/details/83624460