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

最新推荐文章于 2024-07-09 15:25:07 发布

原创最新推荐文章于 2024-07-09 15:25:07 发布 · 1.3k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #vue.js

js 同时被 2 个专栏收录

13 篇文章

订阅专栏

vue

5 篇文章

订阅专栏

本文介绍了如何通过JavaScript将数据进行转换，实现powerPlantVos对象的多维度展示，并展示了如何使用Vue组件渲染包含数据完整度的表格。详细步骤包括处理数据、创建列和表格数据，以及单元格合并和操作列显示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

数据转换

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-column
            v-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>