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

问题描述

问 题

这是一个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>

解决方案

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

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

这篇关于vue.js - element-ui表格，怎动态加载数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！