文章目录
前言
一、校验表单
二、滚动到指定位置
1.获取当前table的dom元素数组
2.获取某个索引对应的dom元素距离table的顶部距离
3.设置table滚动到某个位置
三、设置el-table某一行高亮
四、取消el-table某一行高亮
总结
前言
需求：el-table表格当中嵌套el-form表单，在提交的时候校验表单，由于可能填写很多条，所以期望哪一条校验不通过，直观的让用户看到不正确的那一行，所以滚动到不正确的地方并且高亮当前行。
一、校验表单
一般的校验可以直接利用element自己封装的form校验即可，要是有复杂的话，在提交的时候另外写判断规则。
二、滚动到指定位置
1.获取当前table的dom元素数组
const arr = Array.from(this.$refs.table.$el.getElementsByClassName('el-table__row'))
arr就是table的dom元素数组，每一条对应每一行的dom元素
2.获取某个索引对应的dom元素距离table的顶部距离
arr[ index ].offsetTop
用到了offsetTop方法：当前对象到其上级层顶部的距离
3.设置table滚动到某个位置
一般滚动到指定位置可以有以下方法：
- scrollTop(x,y)：
- top:纵坐标 left:横坐标
- scrollTop(options)：
- top:纵坐标 left:横坐标
behavior类型String,表示滚动行为,支持参数 smooth(平滑滚动),instant(瞬间滚动),默认值auto,实测效果等同于instant
window.scrollTo({
top:560,
left:0,
behavior: "smooth"
});
-
scrollTop
设置table滚动到某个位置
table滚动到距离顶部num的位置
this.$refs.table.bodyWrapper.scrollTop = num
注意：table必须有滚动条才会滚动，需要设置固定表头，给el-table加一个高度，我一般设置max-height（最大高度），达到最大高度之后的数据需要滚动查看。如果没设置的话，实现不了滚动到指定行
三、设置el-table某一行高亮
element的table封装了一个setCurrentRow方法，传入某一行数据就会高亮这一行，如果不传入参数，就不会高亮（也可以用来取消高亮）。
当校验不通过时，将这一行数据传入setCurrentRow中，即可实现高亮
this.$refs.table.setCurrentRow(row)
四、取消el-table某一行高亮
el-table默认有个交互就是点击某一行会高亮当前行。
新增一个方法点击触发的方法row-click，在点击之后设置不高亮
<el-table
ref="table"
...@row-click="rowClick"
>
.
.
.
rowClick() {
this.$refs.table.setCurrentRow()
}
也可以根据需求修改高亮样式
/deep/ .el-table__body tr.current-row>td .el-form-item .el-input {
color: #fff;
border: 1px solid #F56C6C !important;
border-radius: 4px;
box-sizing: border-box;
}
总结
总之，就是三步：
- 获取dom元素
- 计算dom元素距离顶部的距离
- 将页面滚动到指定位置
