左侧树代码
html
<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>右侧树形表格代码
html
<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代码
javascript
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);
})
},
}