elementui表格行定位设置
elementui表格行定位设置,element动态设置当前选中行,设置表格滚动
·
简单记录一下
/**
*
* @param {*} list 表格数据
* @param {*} id 根据什么来定位
* @param {*} tableRef 表格实例
*/
export const tableScroll = (list,id,tableRef) => {
// 首先获取所有的行row的高度
const rowHeightList = []; //存放所有元素的高度[50.53.51],每一行的高度都可能不同
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; //选中行位于第几行
for (let i = 0; i < list.length; i++) {
const item = list[i];
// 判断查询的数据是否存在,存在则进行定位操作
if (item.id == id) {
itemRow = item;
rowIndex = i;
break;
}
}
let totalHeight = 0; //求出选中行之前的的高度之和,需要注意的是,当前行的高度不能包含进去
for (let index = 0; index < rowHeightList.length; index++) {
const row = rowHeightList[index];
if (index < rowIndex) {
totalHeight += row;
}
}
// 滚动到指定行
tableRef.value.setScrollTop(totalHeight);
tableRef.value.setCurrentRow(itemRow);
}
魔乐社区(Modelers.cn) 是一个中立、公益的人工智能社区,提供人工智能工具、模型、数据的托管、展示与应用协同服务,为人工智能开发及爱好者搭建开放的学习交流平台。社区通过理事会方式运作,由全产业链共同建设、共同运营、共同享有,推动国产AI生态繁荣发展。
更多推荐

所有评论(0)