Vue.js框架中常用的表格組件有很多，其中比較流行的是element-ui中的el-table。這個(gè)組件可以方便地展示靜態(tài)數(shù)據(jù)，但如何動(dòng)態(tài)地展示JSON數(shù)據(jù)呢？下面我們就來介紹一下。

首先我們需要引進(jìn)element-ui和axios：

import Vue from 'vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import axios from 'axios'
Vue.use(ElementUI)
Vue.prototype.$http = axios

接著在data中定義一個(gè)數(shù)組，存儲(chǔ)要展示的數(shù)據(jù)：

data() {
return {
tableData: []
}
}

然后在created生命周期鉤子中，通過axios獲取到JSON數(shù)據(jù)，將其賦值給tableData：

created() {
this.$http.get('/api/data').then(res =>{
this.tableData = res.data
})
}

最后在el-table組件中將tableData作為數(shù)據(jù)源，使用v-for動(dòng)態(tài)展示即可：

<el-table :data="tableData">
<el-table-column prop="name" label="名稱"></el-table-column>
<el-table-column prop="age" label="年齡"></el-table-column>
<el-table-column prop="gender" label="性別"></el-table-column>
</el-table>

完成以上步驟后，我們就實(shí)現(xiàn)了el-table動(dòng)態(tài)展示JSON數(shù)據(jù)。