update: 单元格合并

src/views/game/cmh/statistics/statistics.vue

@@ -45,7 +45,15 @@
         <el-radio-button label="1" value="1">卡券</el-radio-button>
         <el-radio-button label="2" value="2">积分</el-radio-button>
       </el-radio-group>
-      <el-table :data="prizeList" style="width:100%" :key="dimension" class="mt20">
+      <el-table :data="prizeList" style="width:100%" :span-method="objectSpanMethod" v-if="dimension == '1'" class="mt20">
+        <el-table-column v-for="v in tableHeader" :show-overflow-tooltip="v.tooltip" :width="v.width" :min-width="v.minWidth" :align="v.align" :key="v.prop" :prop="v.prop" :label="v.label" :formatter="v.formatter" :sortable="v.sortable" :fixed="v.fixed">
+          <template slot-scope="scope">
+            <span v-if="v.formatter" v-html="v.formatter(scope.row)"></span>
+            <span v-else>{{ scope.row[v.prop] }}</span>
+          </template>
+        </el-table-column>
+      </el-table>
+      <el-table :data="prizeList" style="width:100%" v-else class="mt20">
         <el-table-column v-for="v in tableHeader" :show-overflow-tooltip="v.tooltip" :width="v.width" :min-width="v.minWidth" :align="v.align" :key="v.prop" :prop="v.prop" :label="v.label" :formatter="v.formatter" :sortable="v.sortable" :fixed="v.fixed">
           <template slot-scope="scope">
             <span v-if="v.formatter" v-html="v.formatter(scope.row)"></span>
@@ -140,8 +148,7 @@ const tableHead = [
     minWidth: '100',
     formatter: function(row) {
       return `<span>${row.jointRate ? row.jointRate : '- -'}</span>`;
-    },
-    fixed: 'right'
+    }
   }
 ];
 const pointHead = [
@@ -334,6 +341,21 @@ export default {
   },
   computed: {},
   methods: {
+    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
+      if ([5, 6, 7, 8, 9].includes(columnIndex)) {
+        if (row.row) {
+          return {
+            rowspan: row.row,
+            colspan: 1
+          };
+        } else {
+          return {
+            rowspan: 0,
+            colspan: 0
+          };
+        }
+      }
+    },
     toDetailPage(type) {
       console.log(type);
       if (type == 1) {
@@ -389,15 +411,30 @@ export default {
       });
     },
     getGamePrize(prizeType) {
+      getGamePrize({ gameId: this.$route.params.id, prizeType }).then(res => {
+        const { result } = res;
+        this.prizeList = result;
+        prizeType == 1 ? this.handleList() : '';
+      });
       if (prizeType == 1) {
         this.tableHeader = tableHead;
       } else {
         this.tableHeader = pointHead;
       }
-      getGamePrize({ gameId: this.$route.params.id, prizeType }).then(res => {
-        const { result } = res;
-        this.prizeList = result;
+    },
+    handleList() {
+      let obj = {};
+      this.prizeList.forEach(item => {
+        if (obj[item.cardId]) {
+          obj[item.cardId].push(item);
+        } else {
+          obj[item.cardId] = [item];
+        }
+      });
+      Object.values(obj).forEach(arr => {
+        arr[0].row = obj[arr[0].cardId].length;
       });
+      this.prizeList = Object.values(obj).flat();
     },
     handleData(data, obj) {
       return data