vue-seamless-scroll +element表格获取后台数据无法滚动或弹回顶部

今天出现一个bug,当在vue-seamless-scroll中把数据放入wholeflowtableData: [],没有问题,可以正常轮播。
但是当动态获取后端数据时缺会出现弹回顶部的问题

问题原因:由于拿到后端数据后我们用push方法一个个push进wholeflowtableData,导致它高度的获取出现问题,从而div发生溢出,无法进行滚动
解决方案
1.定义一个新的数组arr去接收,然后再利用拷贝,将arr这个数组的内容一次性的去拷贝到wholeflowtableData当中,就不会出现如上问题
2.利用v-if判断传过来的数据是否长度大于0,比如wholeflowtableData.length > 0,让其有数据内容再滚动
2.当前后端数据名称不一致时进行循环赋值引用时也会出现这种情况
(1)获取后台数据名称不一致时:

   <div class="table_content_body" style="height: 94%">
      <vue-seamless-scroll
        :data="wholeflowtableData"
        :class-option="optionSetting"
        class="auto-scorll-table"
      >
        <el-table
          :data="wholeflowtableData"
           :span-method="objectSpanMethod"
          style="width: 100%"
          :show-header="false"
        >
          <el-table-column prop="index" align="center" width="180" />
          <el-table-column prop="state" align="center" />
          <el-table-column prop="type" align="center" />
        </el-table>
      </vue-seamless-scroll>
    </div>
export default {
  data() {
    return {
      wholeflowtableData: [],
    };
  },
  computed: {
    optionSetting() {
      return {
        step: 0.2, // 数值越大速度滚动越快
        limitMoveNum: this.wholeflowtableData.length / 2, // 开始无缝滚动的数据量 this.dataList.length
        hoverStop: true, // 是否开启鼠标悬停stop
        direction: 1, // 0向下 1向上 2向左 3向右
        openWatch: true, // 开启数据实时监控刷新dom
        singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
        singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
        waitTime: 1000, // 单步运动停止的时间(默认值1000ms)
      };
    },
  },
  mounted() {
    this.asd();
  },
  methods: {
    async asd() {
      var temp = await rightscroll();//发送请求得到数据
      console.log("temp" + temp);
      //{
      //"index":"2022-1-11",
     // "state":"24时次",
     // "type":true
    //},
      var k = 0;
      var arr=[];//定义一个新数组用来接收后台的数组
      for (let i = 0; i < 8; i++) {
        if (k > 8) {//进行遍历
          break;
        }
        let g = {};//定义一个空对象用来放我们重命名的对象数组
        console.log(k);
        g["index"] = temp[k].index;
        g["state"] = temp[k].state;
         g["type"] = temp[k].type;
         k = k + 1;  
         arr.push(g) //一次循环,将每一组数据放入
      }
      console.log("arr"+arr);
      this.wholeflowtableData = JSON.parse(JSON.stringify(arr))//将arr数组拷贝
    },
  },
};
(2)获取后台数据:当后端数据名称和前端数据名称一致时
代码:
export default {
  data() {
    return {
      wholeflowtableData: [],
    };
  },
  computed: {
    optionSetting() {
      return {
        step: 0.2, // 数值越大速度滚动越快
        limitMoveNum: this.wholeflowtableData.length / 2, // 开始无缝滚动的数据量 this.dataList.length
        hoverStop: true, // 是否开启鼠标悬停stop
        direction: 1, // 0向下 1向上 2向左 3向右
        openWatch: true, // 开启数据实时监控刷新dom
        singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
        singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
        waitTime: 1000, // 单步运动停止的时间(默认值1000ms)
      };
    },
  },
  mounted() {
    this.asd();
  },
  methods: {
    async asd() {
      var temp = await rightscroll();
      this.wholeflowtableData = temp //只需要赋值即可
    },
  },
};
  • 3
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值