vue 部门tree样式_vue element-ui-tree样式总结

项目要实现一个右键点击tree节点弹出菜单的需求。

右键菜单具体实现如下：

• {{popoverText.add}}
• {{popoverText.edit}}
• {{popoverText.delete}}
• {{popoverText.addTable}}

• {{popoverText.editTable}}
• {{popoverText.deleteTable}}

#menu {

width: auto;

height: auto;

background: #fff;

position: absolute;

z-index: 100;

list-style: none;

padding: 5px;

margin:0;

font-size: 14px;

background: #fff;

box-shadow: 3px 3px 10px rgb(168, 168, 168);

cursor: pointer;

.menu-item {

display: block;

padding: 5px;

color: #555;

}

.icon {

color: rgb(64, 158, 255);

}

}

mounted () {this.$nextTick(() =>{

document.querySelector('body').addEventListener('click', this.handleBodyClick);

});

},

handleBodyClick () {this.menuVisible = false;

},

tree的hover与选中

.el-tree-node__content {&:hover {

background: #89c2f7;

}

}

.el-tree-node:focus>.el-tree-node__content{

background-color: #5daaf0;

}

this.menuVisible = true;

let menu= document.querySelector('#menu');/*菜单定位基于鼠标点击位置*/menu.style.left= event.clientX - 220 + 'px';

menu.style.top= event.clientY - 150 + 'px';

/* 鼠标跟随：注意当内容超出一屏要加上scrollTop的距离 */

elementUI - tree横向滚动问题

.tree{overflow:auto;width:80px;height:500px;

}.el-tree{min-width:100%;display:inline-block !important;

}

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