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

news2025/3/12 17:32:33

在这里插入图片描述

左侧树代码

  <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 = 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);
         })
     },
}