element-plus table 表格,切换下一页,滚动条不会置顶,
<el-table ref='table'>.....</el-table>
<el-footer>
<el-pagination background
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
v-model:current-page="currentPage"
:total="totalCount"
:page-size="pageSize"
:page-sizes="[22, 30, 50, 100]"
:page-count="pageCount"
layout="total,sizes,prev, pager, next"
prev-text="上一页"
next-text="下一页"
>
</el-pagination>
</el-footer>
<scripct>
export default {
methods: {
handleCurrentChange (val) {
this.currentPage = val
this.$nextTick(() => {
console.log('##############', this.$refs.table.scrollTop)
this.$refs.table.scrollTop = 0
})
}
}
}
</script>
上面打印出来是undefined.请指点
哈喽,vue3的ref获取标签方式变了哦,在setup中定义ref,变量名为html绑定的名字。
import { ref } from "vue";
export default {
name: "ref",
setup(){
const table = ref(null) //这里的table就是你的表格标签哦
// 在这里定义置顶方法
const handleCurrentChange = (val)=>{
table.value.$refs.bodyWrapper.scrollTop=0;
}
retuen {
table,
handleCurrentChange
}
}
};
console.log('##############', this.$refs.table.bodyWrapper.scrollTop) 改了也没用,还是一样提示
Uncaught (in promise) TypeError: _this8.$refs.table.bodyWrapper is undefined
Vue3中ref不是这么用的呀。例如我们定义了一个el-table的ref名字是my_ref
//再data中或者setup()中需要做下面的操作
const my_ref = ref(null);
//然后在用到的地方,做下面的操作
table = my_ref.value;
console.log(table);//这里打印一下table看看是不是要的对象,并且可以看看有哪些属性或者方法可以用。
table.bodyWrapper.scrollTop = 0;
我在本地是用的组合式api可以的(关键点是找到table对应的dom 节点,因为只有dom节点才有scrollTo方法可用)。具体如下:
html中
<el-table ref="table"></el-table>
在setup 中
setup(){
.....
const table = ref(null);
const handleCurrentChange = (val)=>{
table.value.$refs.bodyWrapper.scrollTop=0;
}
.....
return {....,handleCurrentChange ,.....}
}
看起来你用的是非组合api的方式,那么对应的,在设置使用scrollTop的时候用下面的代码试试。
this.$refs.table.$refs.bodyWrapper.scrollTop=0;