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-routerElement 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函数将其挂载到idapp的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技术站

(0)
上一篇 2023年5月23日
下一篇 2023年5月23日

相关文章

  • VC使用编译时间作为版本号标识的方法

    使用编译时间作为版本号标识的方法可以在软件版本变化时,方便的追踪和定位问题。下面是详细的攻略: 1. 在VC中设置编译时间宏 在VC的项目属性中,我们可以通过设置一个宏来获取编译时间。具体操作方法如下: 打开VC项目,右键单击项目,选择“属性”。 在左侧窗格中,选择“配置属性”->“C / C++”->“预处理器”。 在“预处理器定义”下,点击“…

    C 2023年5月23日
    00
  • C语言基础 原码、反码、补码和移码详解

    C语言基础 原码、反码、补码和移码详解 在计算机领域,数据一般使用二进制表示,而原码、反码、补码和移码就是将数据转换为二进制表示时的一些规则和方法。 什么是原码? 原码就是一个数的二进制表示,符号位为数据的最高位,0表示正数,1表示负数。例如,-5 的原码就是: 10000101 什么是反码? 反码就是将一个数的原码取反得到的二进制表示。对于正数,其反码就是…

    C 2023年5月23日
    00
  • fork()和exec()的区别

    fork()和exec()的区别 在Linux系统中,fork()和exec()是两个常用的系统调用,它们都与进程有关。但是它们的用途是不同的,这里详细讲解两者的区别。 fork() fork()的作用是创建一个新的进程,新进程是原进程的副本,这个新进程被称为子进程。子进程具有与父进程(即原进程)完全相同的代码和数据,但是其运行状态和内存空间都是独立的,即父…

    C 2023年5月10日
    00
  • 关于C#版Nebula客户端编译的问题

    关于C#版Nebula客户端编译的问题,我将提供一份详细攻略,让您能对C#版Nebula客户端的编译过程有更深入的理解。 前置要求 在开始编译C#版Nebula客户端之前,我们需要先安装相关的开发工具和依赖库。 Visual Studio – 用于开发和编译C#项目的集成开发环境。 Git – 用于从Github上获取Nebula客户端的源代码。 .NET框…

    C 2023年5月23日
    00
  • 电脑蓝屏DMP文件在哪? win10dmp蓝屏文件的打开方法

    电脑蓝屏DMP文件在哪? win10dmp蓝屏文件的打开方法 当我们的电脑系统遭遇蓝屏时,电脑会自动生成一个.DMP文件,该文件内含有电脑蓝屏时相关的信息和错误代码。在解决蓝屏问题时,查看.DMP文件可以帮助我们更快地找到问题所在。本文将讲解.DMP文件的查找以及如何打开.DMP文件。 查找.DMP文件位置 打开文件资源管理器,点击“电脑”(或者“此电脑”,…

    C 2023年5月24日
    00
  • C语言实现图书管理系统(文件数据库)

    C语言实现图书管理系统(文件数据库)攻略 本攻略将介绍如何使用C语言实现基础的图书管理系统,数据存储采用文件数据库。本攻略包含以下内容: 设计数据结构 实现操作函数 完成主函数 示例1: 添加书籍 示例2: 按名称查询书籍 设计数据结构 首先,图书管理系统需要存储书籍的信息,因此需要定义一个书籍结构体,包含书籍的相关信息。 struct Book { int…

    C 2023年5月22日
    00
  • C语言指针比较

    下面我将为您详细讲解C语言指针比较的完整使用攻略。 什么是C语言指针比较 在C语言中,指针比较可以用来比较两个指针变量指向的地址大小。指针变量在比较时,会将其指向的地址转为一个整数,然后进行比较。指针比较有三种情况,即<、>和==。 指针比较的注意事项 在进行指针比较时,需要注意以下几点: 两个指针变量指向的地址必须在同一块内存中。 对空指针进行…

    C 2023年5月9日
    00
  • C语言圣诞树的实现示例

    C语言圣诞树的实现示例 在这个示例中,我们将会使用C语言来实现一个圣诞树的输出效果。代码中将会用到循环、条件语句、字符输出、延时等知识点,让我们一起来看看该如何实现吧。 实现思路 实现圣诞树的思路很简单,我们可以分成两个部分来实现: 打印出圣诞树的形状,包括树干和树叶部分。 在圣诞树上挂上圣诞灯,增添节日气氛。 代码实现 基本思路讲解完了,我们来看看代码: …

    C 2023年5月23日
    00
合作推广
合作推广
分享本页
返回顶部