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

Question

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

<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>

Answer 1

用nextTick这个api给赋值试试，

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