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":"-08-11"},{"province":"江苏","deviceConnNum":109477,"deviceCode":"130000","account":"-08-11"},{"province":"河北","deviceConnNum":98192,"deviceCode":"420000","account":"-08-11"}]}}}</script>
效果
