elementUI中的el-table 实现自动滚动到指定行，同时修改高亮颜色功能——技能提升

昨天在做后台管理系统时，遇到一个需求，就是有一个el-table的表格，当扫描指定条码时，可以根据条码的值比对表格的数据，如果能够找到对应的数据，就将页面滚动到此行的位置，实现自动定位功能。

如下效果：

1.加扫描框——input组件

<el-input v-model="scanData" ref="scanDataRef" style="width:200px;margin-left:10px" placeholder="请扫描条码数据" size="mini" @keyup.enter.native="scanClick" clearable></el-input>

ref:是为了能够让此扫描框获取焦点，可以通过 `this.$refs.xxx.focus()`的方式来获取焦点

@keyup.enter.native 是因为扫码枪在输入内容后会自动打一个回车符，只需要监听回车事件就可以

2.比对代码

if (this.detailData && this.detailData.length) {
    for (var i = 0; i < this.detailData.length; i++) {
        if (this.detailData[i].detailId == this.scanData) {
            this.$refs['detailTableRef'].setCurrentRow(this.detailData[i]);
            var dom = this.$refs.detailTableRef.bodyWrapper;
            this.$nextTick(() => {
                var top2 = this.getElementTop(this.$refs[this.detailData[i].detailId + 'ref']);
                dom.scrollTo(0, top2 - 240);
            });
            this.scanData = null;
            return;
        }
    }
    this.$message.error('未找到相关数据');
    this.scanData = null;
    this.$refs.scanDataRef.focus();
    return;
}

解决思路：通过遍历表格的数据，找到对应的数据(detailId==this.scanData)的数据，设置此行高亮，并且找到表体的dom元素，通过this.$nextTick获取到指定行的dom元素，然后通过scrollTo的方法滚动到指定位置，即可;

3.getElementTop获取当前元素距离页面最顶部的距离

getElementTop(element) {
    var actualTop = element.offsetTop;
    var current = element.offsetParent;
    while (current !== null) {
        actualTop += current.offsetTop;
        current = current.offsetParent;
    }
    return actualTop;
}

表体的dom元素——因为表头固定，所以滚动的是表体部分

el-table中添加ref，可以找到这个表格的dom

给每一行添加ref标签——根据detailId来标记ref值

如果此页面表头不固定，则进行滚动的是body！！！

如果表头不固定，则滚动的时候是整个页面滚动，也就是body滚动，最终的代码应该是：

document.documentElement.scrollTo(0, top2 - 240)

el-table行高亮样式设置

.el-table--striped .el-table__body tr.el-table__row--striped.current-row td, .el-table__body tr.current-row > td {
     color: #fff;
     background-color: #f90 !important;
 }

上面的样式设置一定要加!important，否则鼠标hover的时候还是会有问题。

如果是滚动，还有个简单的方法

表格滚动到指定行的简单方法：http://t.csdn.cn/p0S5c

完成！！！