qq_39327314
阿槑呐
2021-06-14 22:21
采纳率: 0%
浏览 21

element-ui中的表格不显示第一页的数据

 可以看到前端是有数据的,但是并没有把数据显示在表格里,只有翻页后才会显示数据,那么怎样让它在刚加载完成时就显示数据? 

<template>
  <div>
    <el-table
        :data="tableDataEnd"
        height="600"
        border
        style="width: 80%"
     <el-table-column
          prop="DAY"
          label="日期"
      >
      </el-table-column>
      <el-table-column
          prop="IRRAD"
          label="太阳辐射量(千焦/平方米)"
      >
      </el-table-column>
      <el-table-column
          prop="TMIN"
          label="最低气温(摄氏度)"
      >
      </el-table-column>
      <el-table-column
          prop="TMAX"
          label="最高气温(摄氏度)"
      >
      </el-table-column>
      <el-table-column
          prop="VAP"
          label="水汽压(千帕)"
      >
      </el-table-column>
      <el-table-column
          prop="WIND"
          label="风速(米/秒)"
      >
      </el-table-column>
      <el-table-column
          prop="RAIN"
          label="降水量(毫米)"
      >
      </el-table-column>
      <el-table-column
          prop="SNOWDEPTH"
          label="积雪厚度(厘米)"
      >
      </el-table-column>
    </el-table>

    <!--    <div class="block" style="margin-top: 15px;">-->
    <el-pagination background
                   @size-change="handleSizeChange"
                   @current-change="handleCurrentChange"
                   :current-page="currentPage"
                   :page-sizes="[20,30,50]"
                   :page-size="pageSize"
                   layout="total, sizes, prev, pager, next, jumper"
                   :total="total"
    >
    </el-pagination>
    <!--    </div>-->
  </div>
</template>

<script>

export default {
  name: 'Table',
  data() {
    return {
      tableData: [],
      total: 0,
      pageSize: 20,
      currentPage: 1,
      tableDataEnd: []
    }
  },

  created() {
    this.getdata();
  },

  methods: {

    //  从数据库读数据
    getdata: async function getdata() {
      let _this = this;
      this.axios.get('http://localhost:2200/weather',
          {
            timeout: 2000,  //2s后超时
          })
          .then(function (resonse) {
            var data = resonse['data'];

            _this.tableData = data['data'];
            _this.total = data['length'];
          });
    },

    handleSizeChange: function (pageSize) {
      this.pageSize = pageSize;
      this.handleCurrentChange(this.currentPage);
    },

    handleCurrentChange: function (currentPage) {
      this.currentPage = currentPage;
      this.currentChangePage(this.tableData, currentPage);
    },

    // 分页方法
    currentChangePage(list, currentPage) {
      let from = (currentPage - 1) * this.pageSize;
      let to = currentPage * this.pageSize;
      this.tableDataEnd = [];
      for (; from < to; from  ) {
        if (list[from]) {
          this.tableDataEnd.push(list[from]);
        }
      }
    }

  },

}
</script>


<style scoped>

</style>
  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 邀请回答

5条回答 默认 最新

  • u013460269
    易书生 2021-06-15 07:56

    用nextTick这个api给赋值试试,

    或者使用$set这个api,应该是动态设置了数组里面的

    点赞 评论
  • weixin_44058725

    那你的看看,table的data里是否有值。

    点赞 评论
  • weixin_44093204
    _yangyi 2021-06-15 09:44

    可以考虑把获取这些数据那块的代码放出来看看

    点赞 评论
  • qq_41728631
    风雪一更 2021-06-15 10:51

    tableData首次赋值不成功,检查下变量名,和翻页函数里的赋值比较下,看是不是拼写错误或赋值顺序不对

    点赞 评论
  • zszangy
    OurQueen 2021-06-15 23:37

    应该是没有初始化列表数据

    点赞 评论

相关推荐