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 el-table前端 file-saver 导出excel可导出分页数据.zip
12-11
Vue.js作为一款流行的前端框架，提供了丰富的组件库，如Element UI，它包含了一个名为`el-table`的数据表格组件。本篇文章将深入探讨如何在Vue.js项目中结合`el-table`和`file-saver`库，实现前端导出分页数据到...
vue.js 实现导入json解析成动态el-table树表格（接口文档功能）
lemon今天学习了吗？的博客
01-29 5400
一、需求描述：前段时间接到一个需求是做一个类似接口文档的显示功能，将一段json数据贴到里面就可以自动解析出json数据的每个字段的类型和层级关系，用element组件的树表格的形式展示，并且可以手动新增、修改和删除某个数据字段。{"name":"lemon","sex":"女","age":18,"hobby":{"hobby1":"敲代码","hobby2":"跳恰恰"},"likeArr":["水果","青菜"]}3.点击确认后树表格自动展示贴入的json数据，如下图所示；
vue2 el-table中显示json数据
世上没有真正的感同身受
03-28 479
用到插件：vue-json-pretty。效果如下：可打开json数据。
vue3 中 JSON可视化(将后端数据，以格式化过后的形式展示)，以及颜色设置，步长设置
最新发布
qq_52373373的博客
06-03 723
vue3 中 JSON可视化(将后端数据，以格式化过后的形式展示)，以及颜色设置，步长设置
vue 使用vue-json-viewer 展示 JSON 格式数据
qq_37831545的博客
05-29 8162
【代码】vue 使用vue-json-viewer 展示 JSON 格式数据。
VUE展示JSON格式数据【vue-json-viewer】
sunshineTing2的博客
10-28 7329
VUE展示JSON数据
VUE+Element UI 展示json数据 [vue-json-viewer]
weixin_60457220的博客
06-16 2457
【代码】VUE+Element UI 展示json数据 [vue-json-viewer]
vue通过axios获取json数据
热门推荐
m0_63975764的博客
07-25 1万+
vue通过axios获取json数据.
VUE将代码json格式展示到界面
m0_47483157的博客
01-04 3435
有一个需求后端把系统日志传给前端，传出得格式为没有空格换行得字符串格式代码，需要全端格式化展示在界面。
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`生命周期钩子中，`...
Vue实现数据表格合并列rowspan效果
10-16
在本文中，我们将深入探讨如何使用Vue框架来实现数据表格中的列合并，特别是利用`rowspan`属性来达到这一效果。在实际应用中，合并列的需求常见于展示一对多关系的数据，例如显示一个学生的所有课程及其成绩。我们将...
vue element 中的table动态渲染实现（动态表头）
12-13
通过在vue中使用element的table表格，实现数据动态渲染，并且动态渲染表头。通过在父组件中引入子组件表格，然后向子组件传递表格数据和表头数据。 子组件table中template模板 <el-table :data="this.table...
vue-demo-pl-table.zip
12-14
在这个"vue-demo-pl-table.zip"压缩包中，包含了一个使用Vue.js和自定义组件"pl-table"的示例项目，旨在解决在Vue+Element UI环境中使用el-table组件时，由于大量数据导致的渲染卡顿问题。以下是基于这个项目的关键...
vue+element实现sku表格
02-12
`el-table`支持多级表头、行合并、自定义列模板等功能，非常适合构建复杂的数据展示表格。 实现SKU表格的关键步骤如下： 1. **安装依赖**：首先确保已经安装了Node.js环境，然后通过`npm`或`yarn`安装Vue.js、...
element-ui 表格数据时间格式化的方法
10-18
本文将详细介绍如何在Element UI的表格中对时间数据进行格式化。 首先，我们需要在表格的列定义中添加一个名为 `formatter` 的属性。这个属性接收一个函数，用于格式化单元格中的内容。例如： ```html <el-table-...
vue vue-json-viewer 展示 JSON 格式数据
且听风吟的博客
04-12 5570
vue vue-json-viewer 展示 JSON 格式数据
vue获取本地json文件数据
yangy_u的博客
12-06 5828
vue cli2和vue cli3搭建的项目两种不同的目录结构； 一种有static目录；静态资源存放在static下 高版本没有static目录，有public目录；静态资源存放在public下 所以解决方案也不一样； 首先现在并导入axios： 在集成终端中：npm i axios 在main.js文件中： import axios from 'axios' // 安装axios后引入 Vu...
V取出json字符串中的数据，渲染到el-table中
Liuliu_x的博客
04-28 3225
入门小白，记录自己日常遇到的问题，如有不对，欢迎指点！！！ {"deviceDataType":"number","body":{"on":1,"off":0}} 有如上字符串，需要取出body中的值，然后放进el-table中 首先定义一个map用于接收json字符串 var map = JSON.parse(data); 然后取出body，map.body即可取出 取出之后使用forEach循环进行赋值，代码如下 Object.keys(map.body).forEach(v =>
在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、付费专栏及课程。

余额充值