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

首先我們需要引進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中定義一個數組，存儲要展示的數據：

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

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

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

最后在el-table組件中將tableData作為數據源，使用v-for動態展示即可：

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

完成以上步驟后，我們就實現了el-table動態展示JSON數據。