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

在这里插入图片描述

左侧树代码

  <el-tree :data="treeData" node-key="id" default-expand-all="" //节点默认全部展开:expand-on-click-node="false" //是否在点击节点的时候展开或者收缩节点:props="defaultProps" @node-click="handleNodeClick"><span slot-scope="{ node, data }"><span>{{ node.label }}</span></span></el-tree>

右侧树形表格代码

<el-table ref="singleTable" :data="detailsList" highlight-current-row="" row-key="detailId" :tree-props="{children: 'children', hasChildren: 'hasChildren'}" :lazy="lazy" :load="load"><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="160" fixed=""></el-table-column>
</el-table>

js代码

data: function () {return {defaultProps: {children: "childrenList",label: function (data, node) {return  data.name;}},treeData: [],detailsList: [],lazy: true //开启懒加载}
},
methods: {// 点击分项定位到右边表格位置handleNodeClick(data) {// 首先获取所有的行row的高度const rowHeightList = []; //存放所有元素的高度const temp = document.getElementsByClassName("el-table__row");for (let i = 0; i < temp.length; i++) {const item = temp[i];rowHeightList.push(item.scrollHeight);}let itemRow = {}; //存放当前行的所有数据let rowIndex = 0; //选中行位于第几行var number = 0let fn = dataList => {for (let x of dataList) {number++// 判断分项是否存在，存在则进行定位操作if (x.quotaName == data.firstQuotaName) {// itemRow = x;rowIndex = number - 1;break;}if (x.children) {fn(x.children);}}};fn(this.detailsList);let totalHeight = 0; //求出选中行之前的的高度之和,需要注意的是,当前行的高度不能包含进去for (let index = 0; index < rowHeightList.length; index++) {const row = rowHeightList[index];if (index < rowIndex) {totalHeight += row;}}// 滚动到指定行this.$refs.singleTable.bodyWrapper.scrollTop = totalHeightthis.$refs.singleTable.setCurrentRow(itemRow);},// 懒加载数据load(tree, treeNode, resolve) {var childrenList = []childrenList = this.queryDetailsList(tree.detailId)	//查询节点数据resolve(childrenList)// 修改绑定的数据this.updateTableData(tree.detailId,childrenList)},// 查询节点数据queryDetailsList(detailParentId) {let that = thislet childrenList = []$.ajax({url: 接口地址,type: "get",dataType: "json",async: false,contentType: "application/json;charset=UTF-8",success: function (data) {if (data.isOk) {if (data.data) {childrenList = data.data}} else {$.Dialog.error(data.msg);}},});return childrenList},// 修改绑定的数据updateTableData(detailId,childrenList) {let getMenu = function (data) {if (data.children){data.children.forEach((itemChildren) => {if (itemChildren.detailId == detailId) {if (itemChildren.children) {itemChildren.children.forEach(itemOld=>{childrenList.forEach(itemNew=>{if ((itemOld.detailId == itemNew.detailId) && itemOld.children) {itemNew.children = itemOld.children}})})}itemChildren.children = childrenList} else {getMenu(itemChildren);}});}}this.detailsList.forEach(item=>{getMenu(item);})},
}