vue 渲染JSON数据动态生成表格组件

vue 通过渲染JSON数据动态生成表头及对应表格内容组件

<template><div id="viewDialog"><el-button type="text" @click="dialogTableVisible = true">查看</el-button><el-dialog title="详情" :visible.sync="dialogTableVisible"><el-table :data="tableData"><el-table-column v-for="(item,index) in headerList":key="index":label="item":prop="item"></el-table-column></el-table></el-dialog></div>
</template>
<script>
export default {name: "viewDialog",data:function(){return{dialogTableVisible: false,headerList: []}},props: {tableData:{type:Array,default:()=>[]}},mounted() {this.headerList = this.getHeaderList()},methods: {getHeaderList () {let  headerList = []if (this.tableData.length > 0 ) {headerList = Object.keys(this.tableData[0])}return headerList}}}</script>

在主页面中调用该组件

<template><div id="app">
<view-dialog :tableData="tableData"></view-dialog></div>
</template><script>
import viewDialog from './components/viewDialog'
export default {name: 'App',components: {view-dialog: viewDialog},data() {return {tableData: [{"province":"内蒙古","deviceConnNum":150930,"deviceCode":"120000","account":"2020-08-11"},{"province":"江苏","deviceConnNum":109477,"deviceCode":"130000","account":"2020-08-11"},{"province":"河北","deviceConnNum":98192,"deviceCode":"420000","account":"2020-08-11"}]}}}
</script>

效果

vue 渲染JSON数据动态生成表格组件相关推荐

JSON格式化动态生成表格表格转置行列转换 Excel导出
先看效果初始化: JSON格式化 : 生成表格-方式1 : 生成表格-方式2 : Excel导出需要行求和.列求和功能的查看 JSON格式化动态生成表格表格转置行列转换 Excel导出行求 ...
jsp页面根据json数据动态生成table
根据需求由于不同的表要在同一个jsp展示,点击某个表名便显示某张表内容,对于java后台传给jsp页面的json形式的数据是怎么动态生成table的呢? 找了好久,终于找到某位前辈的答案,在此表示衷心 ...
html中循环生成表格数据,动态生成表格(简单实现)
1.案例分析 1.利用对象生成假的数据,用来模拟数据库的数据. 2.核心算法:利用createElement生成表格(生成 tr , td ),注意逻辑关系. 1.css代码 table th { w ...
vue.js根据数据循环生成表格_vue.js循环for（列表渲染）详解
vue.js循环for(列表渲染)详解一.总结一句话总结: v-for {{ item.message }} var example1 = new Vue({ el: '#example-1', ...
layui做折线图_详解layuiAdmin单页版根据后台json数据动态生成左侧菜单栏
layuiAdmin单页版根据后台使用模板方式加载菜单 lay-url="菜单接口" lay-headers="将token带入请求头",如果没有,去掉就行 ...
处理vue异步请求数据动态从父组件向子组件赋值时，子组件无法获取到值问题
1. 组件执行顺序导致: 父组件:created->子组件:created->子组件:mounted->父组件:mounted 2.问题子组件无法获取到值 //父组件 exp ...
vue.js根据数据循环生成表格_vue 遍历数据生成table？
后台数据如下: //银行列表 bankDto: [ 0: {bankName: "中国工商银行", bankCode: "20000001", sName: & ...
vue.js根据数据循环生成表格_vue嵌套列循环生成考勤表数据
如图接口返回数据格式: { "total": 1, "rows": [ { "name": "钟伟清", " ...
django通过ajax请求接口返回多条数据，并动态生成表格，请求表单后将表格数据并入库
一.最近在做接口相关的开发,需求是这样的,通过一个接口所需要传递的参数,调用接口后,处理接口响应的参数,返回多条数据,并动态生成表格,请求表单后将表格的数据入库,下面是我改过的代码,跟实际代码有些出入 ...

vue 渲染JSON数据动态生成表格组件

vue 通过渲染JSON数据动态生成表头及对应表格内容组件

vue 渲染JSON数据动态生成表格组件相关推荐

最新文章

热门文章