600字范文,内容丰富有趣,生活中的好帮手!
600字范文 > 表格数据横向转纵向并在el-table中渲染

表格数据横向转纵向并在el-table中渲染

时间:2019-09-07 03:53:14

相关推荐

表格数据横向转纵向并在el-table中渲染

数据转换

transform(res) {console.log(res, 'res');const data = res.powerPlantVos;const dataKey = [{label: '机组实际发电曲线', val: 'realUnitPowerDate',},{label: '日前申报分段报价', val: 'segQuoPriForDate',},{label: '日前和实际出清结果', val: 'setReaPriDate',},{label: '中长期数据明细', val: 'newEneMedBaseClearElecDate',},{label: '省间现货申报-省内单元出清结果', val: 'provinceClearingDate',},{label: '每日事前数据', val: 'coalStockDate',},{label: '每日事后数据', val: 'aterwardsDailyData',},{label: '月度计划数据', val: 'monthPlanData',},];const column = [{label: '名称',prop: 'name',},];const tableData = [];dataKey.forEach((key, j) => {const obj = {name: key.label,};data.forEach((e, i) => {if(j === 0) {const tempCol = {label: e.unitName,prop: e.unitId,};column.push(tempCol);}if(key.val == 'monthPlanData' && i === 0) {obj[e.unitId] = res.monthPlanData;}else if(key.val == 'coalStockDate' && i === 0) {obj[e.unitId] = res.coalStockDate;}else if(key.val == 'aterwardsDailyData' && i === 0) {obj[e.unitId] = res.aterwardsDailyData;}else {obj[e.unitId] = e?.[key.val];}});tableData.push(obj);});this.dialogData = {column: column,tableData: tableData,};},

表格渲染

<template><el-dialog title="数据完整度" :visible.sync="dialogVisible" @close="cancelDialog"><el-table :cell-class-name="cellOneStyle" :span-method="arraySpanMethod" :data="tableData" border><el-table-columnv-for="(item,index) in column":key="index":align="index == 0 ? 'left' : 'right'":label="item.label":prop="item.prop":width="index == 0 ? 200 : 'auto'"></el-table-column><el-table-column v-if="tableData.length > 0" width="80" align="center" label="操作"><i class="el-icon-view" @click="check"></i></el-table-column></el-table></el-dialog></template><script>export default {props: {showDialog: {type: Boolean,default: false,},dialogData: {type: Object,},},data() {return {dialogVisible: false,column: [],tableData: [],originData: [],loading: false,cellOneStyle: function({ row, column, rowIndex, columnIndex }) {if(columnIndex < 1) {return 'cellStyle';}},};},watch: {showDialog: {handler(falg) {this.dialogVisible = falg;},immediate: true,},dialogData: {handler(falg) {this.tableData = falg.tableData;this.column = falg.column;},// immediate: true,deep: true,},},methods: {// el-table 单元格合并(行)arraySpanMethod({ row, column, rowIndex, columnIndex }) {if(rowIndex == this.tableData.length - 1) {if(columnIndex === 1) {return [2, this.column.length - 1];}else if(columnIndex !== 0 && columnIndex !== this.column.length) {return [0, 0];}}},cancelDialog() {this.$emit('cancelDialog');}},};</script><style lang="scss" scoped>::v-deep .cellStyle {background: var(--tableHeadBackground);}</style>

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。