上图为效果图
<template>
<div class="scrollClass">
<el-scrollbar style="height:610px; width: 240px;">
<el-tree
class="filter-tree"
:data="officeTreeData"
:props="{
value: 'id', // ID字段名
label: 'name', // 显示名称
children: 'childNodes' // 子级字段名
}"
default-expand-all
:filter-node-method="filterNode"
:expand-on-click-node="false"
@node-click="handleNodeClick"
@node-contextmenu="rightClick"
ref="officeTree">
</el-tree>
</el-scrollbar>
</div>
</template>
<script>
export default {
data () {
return {
officeTreeData: []
}
},
activated () {
this.refreshTree()
},
methods: {
refreshTree () {
this.$http({
url: `/siteInfo/data/siteTree`,
method: 'get'
}).then(({data}) => {
this.officeTreeData = data.treeData
})
},
filterNode (value, data) {
if (!value) return true
return data.name.indexOf(value) !== -1
},
handleNodeClick (data) {
this.menuVisible = false
this.office.id = data.id
this.office.name = data.name
this.selectOfficeName = '已选机构: ' + data.name
if (data.type === '6') {
this.officeType = true
} else {
this.officeType = false
}
// this.refreshList()
},
rightClick (MouseEvent, object, Node, element) {
debugger
this.$nextTick(() => {
this.getType()
this.getState(object.id)
})
this.office.id = object.id
this.selectOfficeName = '已选机构: ' + object.name
if (object.type === '2' || object.type === '1') {
this.busVisible = true
this.siteVisible = false
this.officeType = false
} else if (object.type === '6') {
this.busVisible = false
this.siteVisible = true
this.officeType = true
}
this.menuVisible = false // 先把模态框关死,目的是 第二次或者第n次右键鼠标的时候 它默认的是true
this.menuVisible = true // 显示模态窗口,跳出自定义菜单栏
var menu = document.querySelector('#menu')
document.addEventListener('click', this.foo) // 给整个document添加监听鼠标事件,点击任何位置执行foo方法
menu.style.display = 'block'
menu.style.left = MouseEvent.clientX - 200 + 'px'
menu.style.top = MouseEvent.clientY - 140 + 'px'
}
}
}
</script>
<style >
/*此处是为了将原有的横向滚动条隐藏,原本的滚动条很丑*/
.el-scrollbar__wrap {
overflow-x: hidden;
}
/*此处是为了添加横向滚动条*/
.el-tree>.el-tree-node{
/*min-width: 100%;*/
width: 120%;
display:inline-block;
}
</style>
这样,我想要的效果就实现了,既可以竖向滚动,也可以横向滚动。