vue2点击左侧的树节点（el-tree）定位到对应右侧树形表格(el-table)的位置，树形表格懒加载

表格代码

    <el-table 
	    ref="singleTable" 
	    :data="detailsList" 
	    highlight-current-row="" 
	    row-key="detailId" 
	    @row-click="clickTableRow" //左键单击
	    @row-contextmenu="rightClick" //右键单击
	    @cell-dblclick="doubleClick" //双击单元格
	    :cell-style="columnbackgroundStyle" //高亮可编辑单元格
	>
    	<el-table-column type="index" width="80" label="序号" align="center" fixed=""> </el-table-column>
       	<el-table-column property="code" label="编码" width="160" fixed=""></el-table-column>
        <el-table-column property="name" label="名称" width="120" align="center" :key="index">
	         <template slot-scope="scope">
	              <span>
	                  <el-input v-if="scope.row[scope.column.property + 'Show']" clearable="" v-model="scope.row.name" @keyup.enter.native="onBlur(scope.row, scope.column)" @blur="onBlur(scope.row, scope.column)"></el-input>
	                  <span v-else="">{{ scope.row.name }}</span>
	              </span>
	          </template>
      	</el-table-column>
	</el-table>

操作菜单代码

<div id="menu" class="menu">
   <ul class="ul1 list-paddingleft-2">
       <li class="li1" ref="menu1" @mouseover="showChild" @mouseout="hideChild">
           <span>新增下级</span>
           <i class="el-icon-arrow-right" :style="cssStyle.iconfont"></i>
           <ul ref="childMenu1" class="ul2 list-paddingleft-2">
               <li class="li2" @click="chooseList()"><span>选择下级</span></li>
               <li class="li2" @click="addList()"><span>补充下级</span></li>
           </ul>
       </li>
       <li class="li1" @click="delMenu()"><span>删除</span></li>
   </ul>
</div>

js代码

javascript">// 左键单击事件
clickTableRow(row, column, event) {
   var menu = document.querySelector("#menu");
   menu.style.display = "none";
},
 // 右键单击
rightClick(row, column, event) {
  	 this.currentRow = row //存储当前选中的行
     var menu = document.querySelector("#menu"); //展示操作菜单
     event.preventDefault();
     // 页面只读的时候不展示
     if (this.isRead) {
         menu.style.display = "none";
         return
     }
     // 根据事件对象中鼠标点击的位置，进行定位
     menu.style.left = event.clientX + "px";
     menu.style.top = event.clientY + "px";
     // 改变自定义菜单的隐藏与显示
     menu.style.display = "block";
     this.setCurrent(row);
},
setCurrent(row) {
    this.$refs.singleTable.setCurrentRow(row);
},
// 展示菜单子级
showChild() {
   	this.$refs.menu1.style.backgroundColor = '#ecf5ff'
    this.$refs.childMenu1.style.display = 'block'
},
// 隐藏菜单子级
hideChild() {
	 this.$refs.menu1.style.backgroundColor = '#fff'
	 this.$refs.childMenu1.style.display = 'none'
},
// 双击单元格
doubleClickTop(row, column) {
	// 页面只读时不触发
  	if (this.isRead) {
        return
    }
    // 避免点击过快导致多个输入框处于焦点状态
    this.$set(row,column.property + 'Show',false)
    this.$set(row,column.property + 'Show',true)
},
// 输入框鼠标失焦或者键盘回车时触发
onBlur(row, column) {
 	this.$set(row,column.property + 'Show',false)
    // 请求后台更改数据
    this.getDetailsList(row)
},
// 根据输入的公式计算出结果（引入main.js工具库）
calculate() {
    try {
         this.result = this.mathjs.evaluate(输入框绑定的值);
     } catch (error) {
         this.result = '无效的表达式';
     }
},
// 高亮可编辑单元格
columnbackgroundStyle({ row, column, rowIndex, columnIndex }){
	 if (this.isRead) {
         return
     }
     var columnList=['name']
     if (columnList.indexOf(column.property)>-1) {
         return 'background:rgb(249 239 72 / 16%);'
     }
},

样式部分

.menu:{
	position: absolute;
	display: none;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
	background: #ffffff;
	cursor: pointer;
	color: #606266;
	width: 200px;
	border: 1px solid #e4e7ed;
	font-size: 13px;
	z-index:999
}
.ul1:{
	list-style: none;
	margin: 0px;
	padding: 0px;
}
.li1:{
	padding: 0px 10px;
	height: 30px;
	line-height: 30px;
	position: relative;
	box-sizing: border-box;
	text-indent: 8px;
}
.ul2:{
	display: none;
	position: absolute;
	left: 200px;
	top: 0px;
	width: 200px;
	border: 1px solid #e4e7ed;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
	background-color: #fff;
}
.li2:{
	background-color: #fff;
}