左边为树,右边为表格。
功能介绍:左边点击树结构对应结点的时候,会跳转到表格对应锚点的位置的数据;右边滑动表格时,鼠标落在表格的哪一行,对应的树结构锚点会高亮。
1.点击树,表格滑动到对应锚点
<el-tree v-loading="loading"
class="deptTree"
ref="deptTree"
highlight-current
:data="catalogueList"
accordion
@node-click="nodeClick"
:expand-on-click-node="false"
check-strictly
:props="deptTree.mapping"
:node-key="deptTree.mapping.nodeKey"
:default-expand-all="true">
<span class="custom-tree-node" slot-scope="{ node }">
<div style="float: left">
<span>{{ node.label }}</span>
</div>
</span>
</el-tree>
nodeClick(data) {
const selected = this.tableData.find(item => item.index === data.code);
this.searchMember(selected);
},
searchMember(data) {
if (this.tableData && this.tableData.length > 0) {
for (let i = 0; i < this.tableData.length; i++) {
const item = this.tableData[i];
if (item.index === data.index) {
this.$refs.table.getElTable().bodyWrapper.scrollTop = 52 * (i - 1);
this.$refs.table.setCurrentRow(item);
break;
}
}
}
}
2.滑动表格,滑动到的位置的对应锚点的树节点会高亮显示
@cell-mouse-enter="enter"
enter(val) {
this.enterVal(this.catalogueList, val);
},
enterVal(Array, val) {
Array.forEach(ele => {
if (val.index === ele.code) {
this.$refs.deptTree.setCurrentKey(ele);
}
if (ele.children) {
this.enterVal(ele.children, val);
}
});
}