问题:当表格设置固定高度height
同时某一列固定fixed
在表格左侧或右侧时,查询数据,表格出现竖向滚动条时,将滚动条拉至底部重新查询数据,固定的列与未固定的列出现错位现象
解决:两种方案如下:
- Vue原型添加全局方法,在
main.js
文件中全局配置方法,查询表格数据时,在查询方法中调用该方法。
// main.js
Vue.prototype.$tableScroll = (table) => {
table.$refs.body.scrollTop = 0;
table.$refs.body.scrollLeft = 0;
};
// 业务组件.vue,id来源于<Table ref="id"></Table>
this.$tableScroll(this.$refs.id);
- Vue注册全局指令,使用表格组件时只需要配置
v-table-scroll
指令即可
// main.js
Vue.directive('table-scroll', (el, binding) => {
if(binding.value){
el.__vue__.$refs.body.scrollTop = 0;
el.__vue__.$refs.body.scrollLeft = 0;
}
})
// 业务组件.vue,loading在data()中定义,默认设置为false,查询开始为true,查询结束为false
<Table v-table-scroll="loading"></Table>