element Plus table表格定位到指定行

1.树形table,根据下拉框选中的数据定位到某一行

1.先看需求效果,选中下拉框数据,表格数据滚动到第一行

2.代码实现与分析

1.树形下拉框,最主要的就是设置这两个
2.这里的data绑定的数据我是直接绑定的表格中的data对应的数据,省事
3.主要用到node-click事件,因为我们需要的是当前行所有的数据,包括他的children数 据,所以用到这个事件,它返回的就是我们需求的数据,相当于数组扁平化

这是我设置的props,每个人不同,我这里只是记录一下,请忽略
const itemProp = {
  value: "fsecid",
  children: "children",
  label: "taskname"
};

2.表格设置主要的就是设置ref,别的不用管

3.详细代码

1.接口获取数据,树形数据

2.数组扁平化

/** 数组扁平化*/
function treetolist(tree: any[], list: any[]) {
  if (tree && tree.length > 0) {
    tree.forEach(sub => {
      list.push(sub);
      if (sub.children && sub.children.length > 0) {
        treetolist(sub.children, list);
      }
    });
  }
}

3.表格定位事件

//属性下拉框,node-click事件
function handleClick(data) {
  searchup(data);
}
//跳转表格指定位置函数
function searchup(data) {
  // 首先获取所有的行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; //选中行位于第几行
  // 遍历表格数据，获取查询的数据
  //list是我扁平化的数据
  for (let i = 0; i < list.length; i++) {
    const item = list[i];
    // 判断查询的数据是否存在，存在则进行定位操作
    if (item.fid == data.fid) {
      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;
    }
  }
  // 滚动到指定行
  mainTable.value.setScrollTop(totalHeight);
  mainTable.value.setCurrentRow(itemRow);
}