Vue 复杂json数据在el-table表格中展示（el-table分割数据）

已于 2023-11-14 17:23:09 修改
阅读量2.2k 收藏 5
点赞数 1
分类专栏： Vue 文章标签： vue.js json javascript
于 2023-07-22 15:42:43 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xiaohuihui1400/article/details/131868598
版权
Vue 专栏收录该内容
34 篇文章 7 订阅 ¥19.90 ¥99.00
订阅专栏

文章目录

前言

在做复杂的动态表单，实现业务动态变动，比如有一条需要动态添加的el-form-item中包含了多个输入框，并实现表单验证，但在element-ui组件库中给出的表单校验中没有这样的格式，解决方法可参考文章：Element-UI 实现动态增加多个输入框并校验。

如果不想要固定格式的动态增加表单，且增加表单的类型不同，比如按钮开关、文本输入框、数字输入框，想要自由增加不同类型的表单并验证，可以参考文章：Element-UI 实现动态增加多个不同类型的输入框并校验（双重v-for表单验证）。

如果还想要还要复制多套表单且可编辑，可以参考文章：Vue 双重v-for渲染表单，再复制表单编辑之深拷贝。

表单由输入框、选择器、单选框、多选框等控件组成，动态增加各种编辑框存储格式为json，复制生成另外一套表单存储格式同样为json，不同的是，一条数据包含多个表单，而一个表单包含多个编辑框。

那么一条数据的多套表单在el-table表格该怎么做展示？下文将做讲解。

了解本专栏 订阅专栏 解锁全文
一碗情深
关注
  • 1
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
订阅专栏
vue.js 实现导入json解析成动态el-table树表格（接口文档功能）
lemon今天学习了吗？的博客
01-29 5432
一、需求描述：前段时间接到一个需求是做一个类似接口文档的显示功能，将一段json数据贴到里面就可以自动解析出json数据的每个字段的类型和层级关系，用element组件的树表格的形式展示，并且可以手动新增、修改和删除某个数据字段。{"name":"lemon","sex":"女","age":18,"hobby":{"hobby1":"敲代码","hobby2":"跳恰恰"},"likeArr":["水果","青菜"]}3.点击确认后树表格自动展示贴入的json数据，如下图所示；
vue2 el-table中显示json数据
世上没有真正的感同身受
03-28 502
用到插件：vue-json-pretty。效果如下：可打开json数据。
vue中用JSON格式查看数据（vue-json-viewer）
最新发布
Ninewu的博客
06-20 668
vue中把string用JSON格式展示数据。
vue 使用vue-json-viewer 展示 JSON 格式数据
qq_37831545的博客
05-29 8183
【代码】vue 使用vue-json-viewer 展示 JSON 格式数据。
VUE+Element UI 展示json数据 [vue-json-viewer]
weixin_60457220的博客
06-16 2474
【代码】VUE+Element UI 展示json数据 [vue-json-viewer]
Vue.js学习——获取本地JSON文件数据展示到页面
liu5282828的博客
10-19 5727
Vue.js学习——获取本地JSON文件数据展示到页面 自己跟着视频学习，就是B站上搜索 vue.js 点击量最多的那个。 自己编写的json文件如下 { "status":0, "message":[ { "id":1, "name":"三菱", "ctime":"2017-02-03" }, { "id":2, "name":"保时捷", "ctime":"2017-02-03" },
vue使用el-table根据服务端json数据动态合并列
zhy的博客
10-16 1155
效果图 服务端数据json 模拟数据，代替业务敏感数据，如果服务端没有排序，需要先排序处理 [ {"name":"test","number":0,"type":0}, {"name":"test2","number":0,"test":0}, {"name":"test2","number":0,"test":1} ] 前端数据封装处理 table <el-table max-height="400" size="small" :data="list" :span-method.
vue中json格式化显示（vue-json-viewer）
stay hungry, stay foolish
03-12 3125
添加到JsonViewer的组件属性上复制粘贴下面的模板并且根据自定义的theme名称做对应调整。
vue el-table前端 file-saver 导出excel可导出分页数据.zip
12-11
Vue.js作为一款流行的前端框架，提供了丰富的组件库，如Element UI，它包含了一个名为`el-table`的数据表格组件。本篇文章将深入探讨如何在Vue.js项目中结合`el-table`和`file-saver`库，实现前端导出分页数据到...
el-table无限滚动+控制列是否显示+列排序（非json）
01-06
在Vue.js开发中，Element UI库的`el-table`组件是一个强大的数据展示工具，它可以适应各种复杂的场景。在这个特定的案例中，我们关注的是如何实现`el-table`的无限滚动、列显示控制以及非JSON方式的列排序。下面将...
改变el-table宽度
12-12
`:width`的值来自`tableColumn`对象，通过`tableColumn['tab-table-1'][索引]`获取，这里的`'tab-table-1'`是表格ID，索引对应于`el-table-column`在`tableColumn`数组中的位置。 在`mounted`生命周期钩子中，`...
js实现将json数组显示前台table中
11-28
在最近的学习中遇到一个小问题，如何把JSON数组显示在前台的table中，经过一番借鉴和学习之后终于解决了这个问题。具体的代码如下： （前提：利用ajax获取过来的JSON字符串必须是规范的，这样才能解析正确。后台获取数据库中数据的代码省略了） 1、前台JS代码（使用之前引入JQuery的js库文件） $.ajax({ type: "GET", url: "UserList.ashx?Action=List",//利用ajax请求后台的并返回值 // data: "json", success: function (result) {//result为后台返回的值,是json字符串的
Vue实现数据表格合并列rowspan效果
10-16
在本文中，我们将深入探讨如何使用Vue框架来实现数据表格中的列合并，特别是利用`rowspan`属性来达到这一效果。在实际应用中，合并列的需求常见于展示一对多关系的数据，例如显示一个学生的所有课程及其成绩。我们将...
vue element 中的table动态渲染实现（动态表头）
12-13
通过在vue中使用element的table表格，实现数据动态渲染，并且动态渲染表头。通过在父组件中引入子组件表格，然后向子组件传递表格数据和表头数据。 子组件table中template模板 <el-table :data="this.table...
【JSON渲染工具】Element UI动态生成表格，多行表头，自定义表头合并
m0_61049675的博客
10-12 1633
【代码】【JSON渲染工具】Element UI动态生成表格，多行表头，自定义表头合并。
vue+element-ui项目在表格的列中处理并展示复杂数据（数组）
热门推荐
绝圣弃智-零的博客
04-30 2万+
总是以问题为中心。 问题背景： 在vue+element-ui项目中，以表格形式呈现数据很容易，el-table,el-table-column两个标签加上：data,prop,slot-scope三个用来绑定数据的属性就能解决好多问题了。 问题描述： 系统用户user，每个user可能有多个角色role，user中有一个属性为数组roles，封装所有的role。 将每一个user...
vue3 封装 el-table 支持嵌套 + render + json 配置
weixin_44180190的博客
08-30 1289
vue3 封装 el-table js 版本代码 支持 嵌套标签 支持 json 配置 支持 render函数
vue模板中elementui的应用el-table-column prop如何调用json对象,将数字转成中文
04-29 3077
项目中需要在列表中增加一列显示状态说明，如果直接给出数字，用户看不懂，需要把数字状态转成中文说明才能看得懂。 后台返回的原始数据格式如下 data:[ { "id":156, "order_sn": "2021042934567231", "record":{"id":13841,"status":10}, "user":[{"id":111,"name":"zhangsan"},{"id":112,"name":"lisi"}]
Element-UI实现复杂table表格结构
觉醒法师的专栏
03-09 1万+
Element-UI组件el-table用于展示多条结构类似的数据，可对数据进行排序、筛选、对比或其他自定义操作。这里将使用到以下两项，来完成今天demo演示：1. 多级表头：数据结构比较复杂的时候，可使用多级表头来展现数据的层次关系。2. 合并行或列：多行或多列共用一个数据时，可以合并行或列。
在vue中el-table表格导出csv
05-20
在Vue中，可以使用第三方库`json2csv`来将JSON数据转换为CSV格式，然后使用浏览器的`Blob`和`URL.createObjectURL`函数来生成下载链接并下载CSV文件。 以下是一个示例代码： ```html <template> <div> <el-table :data="tableData" ref="table"> <el-table-column prop="name" label="Name"></el-table-column> <el-table-column prop="age" label="Age"></el-table-column> </el-table> <el-button @click="handleDownload">Export CSV</el-button> </div> </template> <script> import json2csv from 'json2csv' export default { data() { return { tableData: [ { name: 'John', age: 30 }, { name: 'Mary', age: 25 } ] } }, methods: { handleDownload() { const fields = ['name', 'age'] const csvData = json2csv({ data: this.tableData, fields }) const blob = new Blob([csvData], { type: 'text/csv;charset=utf-8;' }) const url = URL.createObjectURL(blob) const link = document.createElement('a') link.setAttribute('href', url) link.setAttribute('download', 'data.csv') link.style.visibility = 'hidden' document.body.appendChild(link) link.click() document.body.removeChild(link) } } } </script> ``` 在上面的代码中，我们使用`json2csv`将`tableData`数据转换为CSV格式并存储在`csvData`变量中。然后，我们使用浏览器的`Blob`和`URL.createObjectURL`函数来创建一个CSV文件的下载链接。最后，我们使用一个隐藏的链接来模拟点击并下载CSV文件。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

一碗情深

你的鼓励是我创作最大的动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值