美文网首页
iview table 滚动条位置重置

iview table 滚动条位置重置

作者: skyfiring | 来源:发表于2019-12-12 17:00 被阅读0次
    问题:当表格设置固定高度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>
    

    相关文章

      网友评论

          本文标题:iview table 滚动条位置重置

          本文链接:https://www.haomeiwen.com/subject/znytnctx.html