vue实现导入json解析成动态el-table树表格

首先，我们需要导入所需的依赖。可以使用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": "[e-mail]",
      "phone": "555-555-1234"
    },
    {
      "id": 2,
      "firstName": "Jane",
      "lastName": "Doe",
      "email": "[e-mail]",
      "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。