1

src/components/Hotel/hotelSpider.vue

@@ -33,49 +33,23 @@
       </ul>
     </div>
     <div>
-      <table class="singeRowTable" border="0" cellspacing="0" cellpadding="0" v-loading='loading'>
-        <tr>
-          <th width="200">酒店名称</th>
-          <th width="70">类型</th>
-          <template v-if="dataList&&dataList.length>0">
-            <template v-for="(hItem,hIndex) in dataList[0].SubList">
-              <th :key="`d_h_`+hIndex">
-                {{hItem.CheckInStr}}({{hItem.WeekStr}})
-              </th>
-            </template>
+      <el-table :data="processedData" border style="width: 100%" v-loading='loading' :span-method="objectSpanMethod"
+        :header-cell-style="{background: '#f5f7fa', fontWeight: 'bold'}" max-height="690px" highlight-current-row>
+        <el-table-column prop="DiDaHotelName" label="酒店名称" width="200" align="center" fixed></el-table-column>
+        <el-table-column prop="priceType" label="类型" width="70" align="center" fixed></el-table-column>
+        <el-table-column v-for="(header, index) in dateHeaders" :key="index" :label="header.label" align="center"
+          min-width="75">
+          <template slot-scope="scope">
+            <span v-if="scope.row.priceType === '直客价'"
+              :style="{color: scope.row.priceArray[index] < scope.row.teamPriceArray[index] ? 'red' : ''}">
+              {{ scope.row.priceArray[index] }}
+            </span>
+            <span v-else>
+              {{ scope.row.priceArray[index] }}
+            </span>
           </template>
-        </tr>
-        <template v-for="(item,index) in dataList">
-          <tr :key="`d_1_`+index">
-            <td rowspan="2">
-              {{item.DiDaHotelName}}
-            </td>
-            <td>
-              直客价
-            </td>
-            <template v-for="(hItem,hIndex) in item.SubList">
-              <td :key="`d_1_`+index+`d1_`+hIndex">
-                <template v-if="hItem.Price<hItem.TeamPrice">
-                  <font style="color:red;">{{hItem.Price}}</font>
-                </template>
-                <template v-else>
-                  {{hItem.Price}}
-                </template>
-              </td>
-            </template>
-          </tr>
-          <tr :key="`d_2_`+index">
-            <td>
-              道旅价
-            </td>
-            <template v-for="(hItem,hIndex) in item.SubList">
-              <td :key="`d_2_`+index+`d2_`+hIndex">
-                {{hItem.TeamPrice}}
-              </td>
-            </template>
-          </tr>
-        </template>
-      </table>
+        </el-table-column>
+      </el-table>
       <el-pagination background @current-change="handleCurrentChange" :current-page.sync="msg.pageIndex"
         layout="total,prev, pager, next, jumper" :page-size="msg.pageSize" :total="msg.total"></el-pagination>
     </div>
@@ -124,7 +98,67 @@
         loading: false,
       };
     },
+    computed: {
+      // 处理表头数据
+      dateHeaders() {
+        if (this.dataList.length > 0 && this.dataList[0].SubList) {
+          return this.dataList[0].SubList.map(item => ({
+            label: `${item.CheckInStr}(${item.WeekStr})`
+          }));
+        }
+        return [];
+      },
+      // 处理表格数据
+      processedData() {
+        const result = [];
+        this.dataList.forEach(hotel => {
+          // 直客价行
+          result.push({
+            DiDaHotelName: hotel.DiDaHotelName,
+            priceType: '直客价',
+            priceArray: hotel.SubList.map(item => item.Price),
+            teamPriceArray: hotel.SubList.map(item => item.TeamPrice),
+            rowspan: 2 // 用于合并单元格
+          });
+
+          // 道旅价行
+          result.push({
+            priceType: '道旅价',
+            priceArray: hotel.SubList.map(item => item.TeamPrice),
+            rowspan: 0 // 用于合并单元格
+          });
+        });
+        return result;
+      }
+    },
     methods: {
+      // 单元格合并方法
+      objectSpanMethod({
+        row,
+        column,
+        rowIndex,
+        columnIndex
+      }) {
+        if (columnIndex === 0) { // 酒店名称列
+          if (row.rowspan === 2) {
+            return {
+              rowspan: 2,
+              colspan: 1
+            };
+          } else {
+            return {
+              rowspan: 0,
+              colspan: 0
+            };
+          }
+        }
+        if (columnIndex === 1) { // 类型列不需要合并
+          return {
+            rowspan: 1,
+            colspan: 1
+          };
+        }
+      },
       //翻页功能按钮
       handleCurrentChange(val) {
         this.msg.pageIndex = val;