上图为效果图
<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>这样，我想要的效果就实现了，既可以竖向滚动，也可以横向滚动。
