iview table 滚动条位置重置

问题:当表格设置固定高度height同时某一列固定fixed在表格左侧或右侧时,查询数据,表格出现竖向滚动条时,将滚动条拉至底部重新查询数据,固定的列与未固定的列出现错位现象
image.png
解决:两种方案如下:
  1. 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);
  1. 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>
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • ORA-00001: 违反唯一约束条件 (.) 错误说明:当在唯一索引所对应的列上键入重复值时,会触发此异常。 O...
    我想起个好名字阅读 5,475评论 0 9
  • 基于Vue的一些资料 内容 UI组件 开发框架 实用库 服务端 辅助工具 应用实例 Demo示例 element★...
    尝了又尝阅读 1,190评论 0 1
  • Swift1> Swift和OC的区别1.1> Swift没有地址/指针的概念1.2> 泛型1.3> 类型严谨 对...
    cosWriter阅读 11,160评论 1 32
  • Zookeeper用于集群主备切换。 YARN让集群具备更好的扩展性。 Spark没有存储能力。 Spark的Ma...
    Yobhel阅读 7,385评论 0 34
  • 古典宇宙观是从神话发展来的。我们用我们自己平时生活的样子、用我们能看到东西的样子来解释我们这个世界。因此,虽然中外...
    梁文辉_b655阅读 366评论 0 0