element-ui表格，怎动态加载数据

Question

这是一个element-ui表格，我怎动态加载数据呢？通过ajax请求加载远端数据。tableData

<template>
    <el-table
      :data="tableData"
      style="width: 100%">
      <el-table-column
        prop="date"
        label="日期"
        width="180">
      </el-table-column>
      <el-table-column
        prop="name"
        label="姓名"
        width="180">
      </el-table-column>
      <el-table-column
        prop="address"
        label="地址">
      </el-table-column>
    </el-table>
  </template>

  <script>
    export default {
      data() {
        return {
          tableData: [{
            date: '2016-05-02',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1518 弄'
          }]
        }
      }
    }
  </script>

Answer 1

new Vue({

    el: '#app',
    data(){
        return {
            tableData: []
        }
    },
    created: function () {
        var data = []
        let url = 'table.json'
        Vue.prototype.$http = axios;
        let _this = this
        this.$http.post(url, {}).then(function (res) {
            for (let i = 0; i < res.data.length; i++) {
               
                var obj = {}
                obj.date = res.data[i].date
                obj.name = res.data[i].name
                obj.address = res.data[i].address
                data[i] = obj
            }
            _this.tableData = data
        }).catch(function (error) {

        })
    }
})
可以这样来动态获取数值

Answer 2

请求后端数据，然后把请求回来的数据赋值给 tableData 就行了
this.tableData = 你请求回来的数据

Answer 3

楼上正解 thableData前一定要加 this　否则拿不到