先上图说需求
点击左边树结构,右边表格选中并跳转到指定行
由于这个表格是滚动表格数据较多,所以客户有了这样一个需求
直接上图
树结构点击事件
表格渲染数据和ref属性
这样就搞定了!!!
附代码:
methods:{
handleNodeClick(data) {
let {id} = data
let ids=[]
this.currentTableData.forEach(item=>{
if (item.id == id) {
ids.push(item)
}
})
if (ids) {
ids.forEach(row => {
this.$refs.multipleTable.toggleRowSelection(row);
});
} else {
this.$refs.multipleTable.clearSelection();
}
this.searchMember(data)
},
//跳转表格指定位置
searchMember(data) {
// 遍历表格数据,获取查询的数据
if (this.currentTableData && this.currentTableData.length > 0) {
for (let i = 0; i < this.currentTableData.length; i++) {
const item = this.currentTableData[i];
// 判断查询的数据是否存在,存在则进行定位操作
if (item.id == data.id) {
this.$refs.multipleTable.bodyWrapper.scrollTop = (52 * (i -1));
console.log((height * (i -1)));
this.$refs.multipleTable.setCurrentRow(item);
break;
}
}
}
},
}