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

左侧树代码

  
    <span slot-scope="{ node, data }">
         <span>{{ node.label }}span>
 	span>
  el-tree>
1
2
3
4
5
6
7
8
9
10
11

右侧树形表格代码

<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>
1
2
3
4
5
6
7
8
9
10
11
12

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 = 0
        let 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 = totalHeight
        this.$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 = this
          let 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);
         })
     },
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109

el-table左键双击单元格编辑内容(输入框输入计算公式可直接得出结果)，右键单击展示操作菜单，可编辑单元格高亮展示