修改表格自适应

src/components/Supplier/HotelQueryList.vue

@@ -4,7 +4,7 @@
       <ul style="position:relative;">
         <li>
           <span>
-            <em>{{$t('system.quety_area')}}</em>
+            <em class="HQ_em">{{$t('system.quety_area')}}</em>
             <el-select v-model="msg.Province" filterable @change="getProvinceList(msg.Province,2)"
               :placeholder="$t('hotel.hotel_province')">
               <el-option :key="0" :value="0" label="请选择"></el-option>
@@ -17,7 +17,7 @@
           </span>
         </li>
         <li>
-          <span><em>{{$t('admin.admin_company')}}</em>
+          <span><em class="HQ_em">{{$t('admin.admin_company')}}</em>
             <el-select filterable v-model='msg.OutBranchId' :placeholder="$t('pub.unlimitedSel')">
               <el-option :label="$t('pub.unlimitedSel')" :value='-1'></el-option>
               <el-option v-for='item in companyList' :label='item.BName' :value='item.Id' :key="item.Id">
@@ -27,7 +27,7 @@
         </li>
         <li>
           <span>
-            <em>星级</em>
+            <em class="HQ_em">星级</em>
             <el-select v-model="msg.Star" class="w150" :placeholder="$t('pub.pleaseSel')">
               <el-option :label="$t('pub.unlimitedSel')" :value='0'></el-option>
               <el-option label="3星或商务" :value='3'></el-option>
@@ -38,7 +38,7 @@
         </li>
         <li>
           <span>
-            <em>价格区间</em>
+            <em class="HQ_em">价格区间</em>
             <el-select v-model="msg.PriceLevel" :placeholder="$t('pub.pleaseSel')">
               <el-option :label="$t('pub.unlimitedSel')" :value='0'></el-option>
               <el-option label="5000以下" :value='1'></el-option>
@@ -51,7 +51,7 @@
             </el-select>
           </span>
         </li>
-        <li><span><em>日期</em>
+        <li><span><em class="HQ_em">日期</em>
             <el-date-picker v-model='msg.StartDate' value-format="yyyy-MM-dd" type="date" :picker-options="beforeCheck">
             </el-date-picker>
             <el-date-picker v-model='msg.EndDate' value-format="yyyy-MM-dd" type="date" :picker-options="afterCheck">
@@ -60,7 +60,7 @@
         </li>
         <li>
           <span>
-            <em>酒店</em>
+            <em class="HQ_em">酒店</em>
             <el-select v-model="msg.HotelChooseArray" :placeholder="$t('pub.pleaseSel')" class="multiple_input w300"
               filterable multiple :multiple-limit="3">
               <el-option v-for="item in HotelList" :key="item.ID" :label="item.Name" :value="item.ID"></el-option>
@@ -68,10 +68,10 @@
           </span>
         </li>
         <li style="position:absolute;top:0;right:10px;">
-          <input type="button" class="normalBtn" value="温馨提示"
+          <input type="button" class="normalBtn" style="padding:0 12px;margin-left:0" value="温馨提示"
             @click="showNotice=true,resetPageIndex(),GetHotelTipList()" />
-          <input type="button" class="normalBtn" value="查询" @click="getList()" />
-          <input type="button" class="normalBtn" value="下载" @click="DownLoadHotelQuery()" />
+          <input type="button" class="normalBtn" value="查询" style="padding:0 12px;margin-left:5px" @click="getList()" />
+          <input type="button" class="normalBtn" value="下载" style="padding:0 12px;margin-left:5px" @click="DownLoadHotelQuery()" />
         </li>
       </ul>
     </div>
@@ -86,7 +86,7 @@
         <span style="color:#000000;background-color: #02F78E;padding:2px 4px;border-radius:5px">特别价</span>
       </div>
       <template v-if="isShow">
-        <el-table v-if="dataList.length>0" :data="dataList" style="width:100%" border v-loading='loading' height="500">
+        <el-table v-if="dataList.length>0" :data="dataList" style="width:100%" border v-loading='loading' :height="tableHeight">
           <el-table-column fixed label="酒店名称" min-width="180">
             <template slot-scope="scope">
               <div style="text-decoration: underline;cursor:pointer">
@@ -253,6 +253,7 @@
           //价格等级
           PriceLevel: 0,
         },
+        tableHeight:0,
         beforeCheck: {
           disabledDate: time => {
             if (this.msg.StartDate) {
@@ -557,6 +558,16 @@
             this.loading = false;
           });
       },
+      com_onresize(){
+        //clientHeight的值由DIV内容的实际高度和CSS中的padding值决定，
+        var contentsHeight = document.body.clientHeight;        
+        var h = contentsHeight - 50 - 134 - 50;
+        if(h < 110){
+            return;
+        }
+          //设置table的行高
+          this.tableHeight =  h;
+        }
     },
     mounted() {
       this.getBranchList();
@@ -564,6 +575,10 @@
       this.GetHotelList();
       this.getList();
       this.GetHotelTipList();
+      this.com_onresize();
+      window.onresize = () => {
+          this.com_onresize();
+      }
     },
   };
 
@@ -698,4 +713,7 @@
   .hotelQury2 .w150 .el-input{
     width:150px;
   }
+  .HQ_em{
+    min-width: 75px!important;
+  }
 </style>