element ui table scrollTop 滚动到行头

C_小笨笨

已于 2022-08-04 13:48:51 修改

阅读量1.2k

点赞数

文章标签： ui vue.js javascript

于 2022-07-27 10:20:51 首次发布

本文链接：https://blog.csdn.net/m0_45218136/article/details/126007804

版权

element ui table scrollTop 滚动到行头
昨天写了一个el-table表单，没有给表单添加滚动打行头的方法，用户体验很差。

<el-table
        :data="list"
        height="calc(100vh - 270px )"
        stripe
        border
        style="width: 100%"
        ref="multipleTable"
      >

 getVWsfarticleList() {
      let data = {
        wheres: "", //条件
        pagination: 1, //是否分页 1是分页
        page: this.page, //当前的页数
        rows: this.rows, //行数
      };
      
      if (this.AppName != "") {
        data.wheres = "extend4=" + this.AppName;
      }
      this.$api.getVWsfarticleList(data).then((res) => {
        console.log(res);
        for (var i = 0; i < res.data.length; i++) {
          res.data[i].CreateTime = this.getNowFormatDate(
            res.data[i].CreateTime
          );
        }
        this.list = res.data;
        this.total = res.total;
        // console.log(this.total);
        
      });
      this.$refs.multipleTable.bodyWrapper.scrollTop = 0; 
    },

这样写虽然能够是使用，但是会报错，其实报错也不会有太大问题，但终究还不是不好。在这里插入图片描述
正确的写法是

getVWAccountStatisticsList() {
      let data = {
        wheres: "", //条件
        pagination: 1, //是否分页 1是分页
        page: this.page, //当前的页数
        rows: this.rows, //行数
      };
      if (this.AppName != "") {
        data.wheres = "Extend1=" + this.AppName;
      }
      this.$api.getVWAccountStatisticsList(data).then((res) => {
        console.log(res);
        this.list = res.data;
        this.total = res.total;
      });
      // table滚动到行头
      this.$nextTick(() => {
        this.$refs.multipleTable.bodyWrapper.scrollTop = 0;
      });
    },

也不知道这样写对不对，欢迎指正!