关于表格搜索聚焦的一种实现方法

最近项目上需要一个功能，在一个表格中搜索某个科目名称，并且将该行滚动到表格的首行，大佬帮忙想了好多中实现方法，现在写下我使用的的一种
1、实现思路
1.1找到一个表格中的dom组件，在这个组件上写上唯一的id,然后搜索进行完以后，对该表格数据进行遍历，生成一个数组，存放所有符合的行id.，然后选取第一个的id
1.2 找到可以进行滚动的那个dom 的id，设置该dom的scrollTop为0 这样的做法是在用户搜索滚动条上方位置的时候也可以进行滚动
1.3 计算一下需要进行滚动的高度，比如要用符合搜索条件的而第一个dom 的top值减去表头的高度和表格的top 值
1.4 用jQuery的scrollTop 属性对可以滚动的dom节点进行操作
2、下面是具体的实现代码

onSearchText = () => {
    const val = $('#budget_input')
      .val()
      .trim();
    this.props
      .dispatch({
        type: `${nameSpace2}/searchText`,
        payload: {
          searchKeyword: val,
        },
      })
      .then((res) => {
        const {dataSource} = this.props.budgetManagement;//获取表格的行数据进行遍历
        let nameList = [];
        _forEach(dataSource, (item) => {//由于该项目的表格存在子节点，所以要进行多次遍历并判断保证所有的子节点都被遍历到了
          if (!_unDefiend(item.childList) && item.childList.length > 0) {
            _forEach(item.childList, (item) => {
              if (!_unDefiend(item.childList) && item.childList.length > 0) {
                _forEach(item.childList, (item) => {
                  if (item.X_NAME.indexOf(val) > -1) {
                    nameList.push(item);
                  } else {
                    return null;
                  }
                });
              } else {
                if (item.X_NAME.indexOf(val) > -1) {
                  nameList.push(item);
                } else {
                  return null;
                }
              }
            });
          } else {
            if (item.X_NAME.indexOf(val) > -1) {
              nameList.push(item);
            } else {
              return null;
            }
          }
        });
        const fundDom = $(`#${nameList[0].X_NAME}`);
        const domleft = fundDom.offset().left;
        const budgetTable = $('#budgetTable');//这里找到的是整个表格的id
        const scrollTableBody = $('#budgetTable .ant-table-body'); //限定在budgetTable这个id的div中找className为ant-table-body的元素
        if (_unDefiend(scrollTableBody)) {
          return null;
        }
        scrollTableBody[0].id = 'scrollTableBody';
        $('#scrollTableBody').scrollTop(0);
        const scrollTop =
          fundDom.offset().top -
          budgetTable.offset().top -
          budgetTable.find('.ant-table-fixed').height();//表头的高度
        $('#scrollTableBody').scrollTop(scrollTop);
      });
  };

这里的小知识：
1、jQuery可以设置搜索类名或者id的时候进行范围的限定。比如在父组件上增加个ID：budgetTable 在这个组件中寻找类名为ant-table-body的dom节点可以写成这样
$(’#budgetTable .ant-table-body’)
2、这里我们用到的表格是antd的没找到什么好办法在每一行上加id 所以加在了cellRender的时候添加的组件上

renderIdxMc = (indexName) => {
    const {searchKeyword} = this.props.budgetManagement;
    return (
      <Highlighter
        id={indexName}//添加id
        searchWords={[searchKeyword]}
        textToHighlight={indexName}
        highlightClassName='highlighter'
        title={indexName}
      />
    );
  };

3、写在最后
大佬还给我找了另一种滑动的方法不过由于不符合项目要求就没有使用，写在这里做个参考
react-scroll插件 gitHub 地址