首先,我们需要导入所需的依赖。可以使用npm或者yarn命令安装相关依赖:
npm install vue vue-router axios element-ui --save-dev
其中,vue
是Vue.js框架核心库,vue-router
用于路由管理,axios
用于发起网络请求,element-ui
用于构建UI组件。
接着,我们需要在Vue.js应用中创建一个组件,用来渲染动态el-table树表格。可以在Vue.js应用的/src/components
目录中创建一个名为DynamicTable
的新组件,代码如下:
<template>
<el-table
:data="tableData"
:tree-props="{ children: 'children', hasChildren: 'has_children' }"
:row-style="{ 'font-weight': 500 }"
style="width: 100%">
<el-table-column
prop="name"
label="名称"
width="140">
</el-table-column>
<el-table-column
prop="age"
label="年龄"
width="140">
</el-table-column>
<el-table-column
prop="address"
label="地址">
</el-table-column>
</el-table>
</template>
<script>
export default {
name: 'DynamicTable',
props: {
dataSource: {
type: Array,
default: () => []
}
},
data() {
return {
tableData: this.dataSource
}
}
}
</script>
在该组件中,我们使用了Element UI提供的el-table
组件来渲染表格。其中,使用:data
属性绑定了表格数据,即tableData
,使用:tree-props
属性绑定了表格的树形结构配置,使用:row-style
属性绑定了行样式,表格列通过<el-table-column>
组件来定义。
接着,我们需要在Vue.js应用中创建一个视图,用于展示DynamicTable
组件,并解析JSON数据展示在动态表格中。可以在Vue.js应用的/src/views
目录中创建一个名为DynamicTableView
的新视图,代码如下:
<template>
<div>
<h1>动态表格演示</h1>
<el-button type="primary" @click="loadData">加载数据</el-button>
<dynamic-table :data-source="tableData" />
</div>
</template>
<script>
import DynamicTable from '@/components/DynamicTable'
import axios from 'axios'
export default {
name: 'DynamicTableView',
components: {
DynamicTable
},
data() {
return {
tableData: []
}
},
methods: {
loadData() {
axios.get('/api/data.json').then(response => {
const data = response.data
this.tableData = data
})
}
}
}
</script>
在该视图中,我们使用了Element UI提供的el-button
组件来增加一个按钮,点击按钮后可以加载数据。同时,使用自定义的DynamicTable
组件来展示表格。我们在Vue.js应用中使用axios
库来发起一个GET请求,获取数据并解析成JavaScript对象,然后将其传递给DynamicTable
组件的dataSource
属性。
我们需要在Vue.js应用的入口文件main.js
中挂载vue-router
和Element UI
:
import Vue from 'vue'
import VueRouter from 'vue-router'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import App from './App.vue'
import DynamicTableView from './views/DynamicTableView.vue'
Vue.config.productionTip = false
Vue.use(VueRouter)
Vue.use(ElementUI)
const routes = [
{ path: '/', component: DynamicTableView }
]
const router = new VueRouter({
routes
})
new Vue({
router,
render: h => h(App)
}).$mount('#app')
在这里,我们定义了一个路由表,然后使用VueRouter
库来创建一个路由实例。我们使用render
函数来渲染Vue.js应用,并将路由实例传入,在调用$mount
函数将其挂载到id
为app
的DOM元素上。
现在,我们可以通过访问应用的根目录可以展示动态表格了。点击加载数据按钮后,我们可以从JSON文件中获取数据并渲染到表格中,可以看到表格会根据JSON数据自动渲染成树形结构。
示例1:展示自定义的树形图数据
下面是一个示例JSON数据:
[
{
"id": 1,
"name": "霍格沃茨",
"has_children": true,
"children": [
{
"id": 11,
"name": "格兰芬多",
"has_children": true,
"children": [
{
"id": 111,
"name": "哈利·波特",
"age": 16,
"address": "伦敦"
},
{
"id": 112,
"name": "赫敏·格兰杰",
"age": 15,
"address": "伦敦"
}
]
},
{
"id": 12,
"name": "斯莱特林",
"has_children": true,
"children": [
{
"id": 121,
"name": "德拉库拉",
"age": 20,
"address": "伦敦"
},
{
"id": 122,
"name": "墨菲斯多·莫克",
"age": 19,
"address": "伦敦"
}
]
}
]
},
{
"id": 2,
"name": "古灵门",
"has_children": true,
"children": [
{
"id": 21,
"name": "雷神之锤",
"age": 25,
"address": "加州"
},
{
"id": 22,
"name": "天启者",
"age": 30,
"address": "加州"
}
]
}
]
示例2:动态加载远程的JSON数据
下面是一个示例JSON数据的API接口:
// File: /api/customers.json
{
"customers": [
{
"id": 1,
"firstName": "John",
"lastName": "Doe",
"email": "john.doe@example.com",
"phone": "555-555-1234"
},
{
"id": 2,
"firstName": "Jane",
"lastName": "Doe",
"email": "jane.doe@example.com",
"phone": "555-555-5678"
}
]
}
修改DynamicTableView
组件中的loadData
方法如下:
loadData() {
axios.get('/api/customers.json').then(response => {
const data = response.data.customers.map(customer => {
const { id, firstName, lastName, email, phone } = customer
return {
id,
name: firstName + ' ' + lastName,
email,
phone,
has_children: false
}
})
this.tableData = data
})
}
在这里,我们先获取JSON数据,然后使用Array.prototype.map
方法将其转换成我们所期望的格式。由于我们没有children字段,所以设置了has_children字段为false。
本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:vue实现导入json解析成动态el-table树表格 - Python技术站