首页 > 解决方案 > 随着当前选定行的变化,如何在 el-table 中实用地滚动?元素.io

问题描述

当我使用向下按钮设置当前行 (setCurrentRow) 时,我正在尝试更新 Element.io 中 el-table 的视口。我努力了:

this.$refs.SearchTable.syncPostion();
this.$refs.SearchTable.updateScrollY();

我目前的通话功能是:

selectUpFromSearchTable(){
                if(this.SearchResult.length > 0 && this.rowIndex-1 >= 0){
                    this.rowIndex--;
                }
                else{
                    this.rowIndex;
                }
               // Update selected element in table. 
                this.$refs.SearchTable.setCurrentRow(this.SearchResult[this.rowIndex]);
                // function to update table scroll position here this.$refs.SearchTable.updateScrollY(this.rowIndex);
            }

我的目标是让表格在我更改所选行时更新其滚动位置。有什么想法可以使用本机 element.io/vue 函数来做到这一点吗?

标签: vue.jselement-io

解决方案


原来它更像是一个 HTML DOM 操作。选择当前行并要求它进入视图的代码是:

            var ScrollTable = document.querySelector('.SearchTable');
            var innerTable = ScrollTable.querySelector('.el-table__body');
            var innerTbody = innerTable.querySelector('tbody');
            var currentRow = innerTbody.querySelector('.current-row');
            currentRow.scrollIntoView();

推荐阅读