el-table + setup语法糖 + 列表变化后滚动条置顶
由于需要做一个el-table,然后再更新地图同时将滚动条滚至最上。但是网上很多资料都是使用this.$refs:
// 底部
this.$nextTick(() => {
this.$refs.tableData.bodyWrapper.scrollTop = this.$refs.tableData.bodyWrapper.scrollHeight
})
// 最顶
this.$refs.tableData.bodyWrapper.scrollTop =0;
但是setup语法糖没有this.$refs该怎么做呢?
首先在el-table中使用ref
<el-table ref="scollTableTop" />
之后,在setup中变量的名字需要和上面ref的一致
const scollTableTop = ref();
之后再需要使用的函数中使用
if(scollTableTop.value !== null)
scollTableTop.value.$refs.scrollWrapper.setScrollTop(0);
至于为啥是用这个函数呢,我也是一个个在object中尝试后无意中发现的,该函数源码如下:
const setScrollTop = (value) => {
if (!isNumber(value)) {
debugWarn(SCOPE, "value must be a number");
return;
}
wrap$.value.scrollTop = value;
};
至于移动到最底函数暂未发现,如果有发现会更新博客的。