no message

src/components/Hotel/singleProduct/components/hotelTableList.vue

+<template>
+  <div>
+    <el-table :data="dataList" 
+      style="width:100%" border
+      ref="mytable" key="HotelId" :height="tableHeight">
+      <el-table-column fixed label="酒店名称" min-width="180">
+        <template slot-scope="scope">
+          <div style="text-decoration: underline;cursor:pointer" @click="showHotelDetailHandler(scope.row.HotelId)">
+            {{scope.row.HotelName}}</div>
+          <div>{{scope.row.TotalInventory}}</div>
+        </template>
+      </el-table-column>
+      <el-table-column label="价格&库存" fixed min-width="120">
+        <template slot-scope="scope">
+          <div class="Hotel_kong">价格</div>
+          <div class="Hotel_kong" style="min-width:60px;">总/用/剩</div>
+          <div class="Hotel_kong">确认/预定</div>
+          <div class="Hotel_kong">超定</div>
+        </template>
+      </el-table-column>
+      <el-table-column v-for='(item,index) in dataList[0].subList' :label="getDateList(item.DateStr)" :key='index'
+        min-width="120">
+        <template slot-scope="scope">
+        <div @click="showOrderSubmitHandler(scope.row,index,0)">
+          <div class="Hotel_kong Com_hoteldiv">
+            <template v-if="scope.row.subList[index].PriceList.length>0">
+              <template v-for="childItem in scope.row.subList[index].PriceList">
+                <div :class="getClass(1,childItem.InventoryType)"
+                  :style="{width:(100/scope.row.subList[index].PriceList.length)+'%'}" class="CostPriceHover">
+                  <el-popover
+                    placement="bottom"
+                    width="300"
+                    trigger="hover">
+                    <SamplePriceList 
+                    v-if="
+                    scope.row.subList[index].PriceList[0].BidroomPrice>0||
+                    scope.row.subList[index].PriceList[0].SingleroomPrice>0||
+                    scope.row.subList[index].PriceList[0].AddBedPrice>0||
+                    scope.row.subList[index].PriceList[0].GuideRoomPrice>0" :price="scope.row.subList[index]"></SamplePriceList>
+                    <div v-else style="text-align: center;width: 100%;">没有其他房型报价</div>
+                    <span slot="reference" class="CostPriceHover">{{childItem.CostPrice}}</span>
+                  </el-popover>
+              </div>
+              </template>
+            </template>
+            <template v-else>
+              <div :class="getClass(0,0)" style="width:100%;height:100%">&nbsp;</div>
+            </template>
+          </div>
+          <div class="Hotel_kong Com_hoteldiv Hq_duoge">
+            {{scope.row.subList[index].Inventory}}/{{scope.row.subList[index].UseInventory}}/{{scope.row.subList[index].RemainingInventory}}
+          </div>
+          <div class="Hotel_kong Com_hoteldiv">
+            {{scope.row.subList[index].ConfirmNum}}/{{scope.row.subList[index].ReserveNum}}
+          </div>
+          <div class="Hotel_kong Com_hoteldiv">
+            <span v-if="scope.row.subList[index].UseInventory-scope.row.subList[index].Inventory>0"
+              style="color:red;">
+              {{scope.row.subList[index].UseInventory-scope.row.subList[index].Inventory}}
+            </span>
+          </div>
+        </div>
+        </template>
+      </el-table-column>
+    </el-table>
+   
+    <!-- 酒店详情信息 -->
+    <el-dialog custom-class="w800" title="酒店详情" :visible.sync="showHotelDetails" center @close="close">
+      <hotelDetails :hotelId="HotelDetailId"></hotelDetails>
+    </el-dialog>
+  </div>
+</template>
+<script>
+  import SamplePriceList from './SamplePriceList'
+  import hotelDetails from './hotelDetails'
+  export default {
+    components: { SamplePriceList,hotelDetails },
+    props:['list','tableHeight'],
+    data() {
+      return {
+        showHotelDetails: false,
+        HotelDetailId: 0,
+        dataList: [],
+      };
+    },
+    watch: {
+      list:{
+        handler(val, oldVal){
+          this.dataList = val
+          let _this = this
+          setTimeout(()=>{
+            this.$nextTick(() => {
+              _this.$refs.mytable.doLayout();
+            })
+          },200)
+        },
+        deep: true,
+        immediate: true,
+      },
+    },
+    methods: {
+      // 酒店信息详情
+      showHotelDetailHandler(hotelId){
+        this.HotelDetailId = hotelId
+        this.showHotelDetails = true
+      },
+      // 取消
+      close(){
+        this.showHotelDetails = false
+      },
+      // 加入购物车
+      showOrderSubmitHandler(row,index,type){
+        this.$emit('showOrderSubmitHandler',row,index,type)
+      },
+      //格式化返回显示日期
+      getDateList(dateStr) {
+        var str = dateStr.split('-');
+        var weekDay = ["天", "一", "二", "三", "四", "五", "六"];
+        var myDate = new Date(Date.parse(dateStr));
+
+        return str[1] + '/' + str[2] + "（" + weekDay[myDate.getDay()] + "）";
+      },
+      //获取星期几
+      getWeek(dateStr) {
+        var weekDay = ["天", "一", "二", "三", "四", "五", "六"];
+        var myDate = new Date(Date.parse(dateStr));
+        return weekDay[myDate.getDay()]
+      },
+      //获取颜色状态
+      getClass(Status, InventoryType) {
+        var classStr = "";
+        if (Status == 0) {
+          classStr = 'noKucun';
+        }
+        switch (InventoryType) {
+          case 1:
+            classStr = "classHong";
+            break;
+          case 2:
+            classStr = "classWang";
+            break;
+          case 3:
+            classStr = "classPing";
+            break;
+          case 4:
+            classStr = "classDan";
+            break;
+          case 5:
+            classStr = "classTe";
+            break;
+          case 6:
+            classStr = "hotelQueryListclass6"
+            break;
+        }
+        return classStr;
+      },
+    },
+    mounted() {
+      
+    }
+  };
+
+</script>
+
+<style>
+  .Hq_duoge {
+    cursor: pointer;
+    text-decoration: underline;
+  }
+
+  .HqCom_bottom .ql-container {
+    min-height: 100px;
+  }
+
+  .classHong {
+    background-color: rgb(255, 55, 55);
+    color: #fff;
+  }
+
+  .classWang {
+    background-color: rgb(255, 153, 204);
+  }
+
+  .classPing {
+    background-color: rgb(188, 214, 238);
+  }
+
+  .classDan {
+    background-color: rgb(221, 221, 221);
+  }
+
+  .classTe {
+    background-color: rgb(2, 247, 142);
+  }
+  .hotelQueryListclass6 {
+    background-color:#808000;
+  }
+  .HouseTypeList {
+    background: #ccc;
+    width: 100%;
+    margin-top: 20px;
+  }
+
+  .Com_hoteldiv {
+    min-width: 70px;
+    white-space: nowrap;
+  }
+
+  .noKucun {
+    background-color: black !important;
+  }
+
+  .Hotel_kong {
+    width: 100%;
+    height: 35px;
+    text-align: center;
+    line-height: 35px;
+    border-bottom: 1px solid #d1d1d1;
+  }
+
+  .Hotel_kong:last-child {
+    border: 0;
+  }
+
+  .HouseTypeList tr th {
+    background: #e6e6e6;
+    height: 35px;
+    font-size: 12px;
+    color: #333;
+  }
+
+  .HouseTypeList tr {
+    background: #fff;
+    text-align: center;
+    height: 35px;
+  }
+
+  .HouseTypeList tr td {
+    font-size: 12px;
+  }
+
+  .hotelProductManage2_tableBox span {
+    margin: 0 10px 10px 0;
+  }
+
+  .Hq_addDetail {
+    margin-top: 20px;
+  }
+
+  .Hq_addDetail .el-textarea__inner {
+    resize: none;
+  }
+
+  .Hq_addTable .el-button.is-circle {
+    padding: 5px;
+  }
+
+  .HqCom_bottom .el-form-item {
+    margin-bottom: 0
+  }
+
+  .HqCom_bottom {
+    height: 350px;
+    padding-top: 35px;
+  }
+
+  .HQ_miaoshu {
+    color: #E95252;
+    font-size: 12px;
+  }
+
+  .HQ_miaoshu:first-child {
+    margin-top: 10px;
+  }
+
+  .HotelQueryList .has-gutter tr th,
+  .el-table th.is-leaf {
+    background: #EAEAEA !important;
+  }
+
+  .HotelQueryList .el-table td,
+  .el-table th.is-leaf {
+    border-bottom: 1px solid #ebeef5;
+  }
+
+  .HotelQueryList .el-table .cell {
+    padding: 0;
+  }
+
+  .HotelQueryList .el-table td {
+    padding: 0;
+  }
+  .CostPriceHover{
+    height:100%;
+    float:left;
+    width:100%;
+    cursor: pointer;
+  }
+  
+
+</style>