style:table组件的完善自适应头部高度。进度查询的修改

@@ -10,13 +10,13 @@
 
 <template>
   <div :class="['lb-table', customClass]">
-    <el-table v-if="!heightNumSetting" class="table-fixed" :row-style="{ height: '50px' }" ref="elTable"
-      :border='border' :row-class-name="tableRowClassName" :show-header='showHeader' @row-click="singleElection"
-      :header-cell-style="{ background: 'rgb(236, 245, 255)' }" v-bind="$attrs" :height="tableHeight" v-on="$listeners"
-      :data="data" style="width: 100%" :span-method="this.merge ? this.mergeMethod : this.spanMethod">
+    <el-table v-if="!heightNumSetting" class="table-fixed" :row-style="{ height: '50px' }" ref="elTable" :border='border'
+      :row-class-name="tableRowClassName" :show-header='showHeader' @row-click="singleElection" v-bind="$attrs"
+      :height="tableHeight" v-on="$listeners" :data="data" style="width: 100%"
+      :span-method="this.merge ? this.mergeMethod : this.spanMethod">
       <el-table-column width="45" align="center" v-if="isRadio">
         <template slot-scope="scope">
-          <el-radio v-model="selected" :label="scope.$index" class="table-radio"></el-radio>
+          <el-radio v-model="selected" :label="scope.$index"></el-radio>
         </template>
       </el-table-column>
 
@@ -24,14 +24,14 @@
       </lb-column>
     </el-table>
 
-    <el-table v-else ref="elTable" class="table-fixed" :row-style="{ height: '50px' }" :border='border'
-      :row-class-name="tableRowClassName" :show-header='showHeader'
-      :header-cell-style="{ background: 'rgb(236, 245, 255)' }" v-bind="$attrs" :max-height="maxHeight"
-      v-on="$listeners" :data="data" style="width: 100%" :span-method="this.merge ? this.mergeMethod : this.spanMethod">
+    <el-table v-else ref="elTable" id="heightNumSetting" class="table-fixed" :row-style="{ height: '50px' }"
+      :border='border' :row-class-name="tableRowClassName" :show-header='showHeader' v-bind="$attrs"
+      :max-height="maxHeight" :height="tableHeight" v-on="$listeners" :data="data" style="width: 100%"
+      :span-method="this.merge ? this.mergeMethod : this.spanMethod">
 
       <el-table-column width="45" align="center" v-if="isRadio">
         <template slot-scope="scope">
-          <el-radio v-model="selected" :label="scope.$index" class="table-radio"></el-radio>
+          <el-radio v-model="selected" :label="scope.$index"></el-radio>
         </template>
       </el-table-column>
       <lb-column v-bind="$attrs" v-for="(item, index) in column" :key="index" :column="item">
@@ -40,7 +40,7 @@
 
     <br>
     <el-pagination class="lb-table-pagination" v-if="pagination" v-bind="$attrs" v-on="$listeners" background
-      :page-sizes="[10, 20, 50, 100]" layout="total, sizes, prev, pager, next" @current-change="paginationCurrentChange"
+      layout="total,  prev, pager, next" @current-change="paginationCurrentChange"
       :style="{ 'margin-top': paginationTop, 'text-align': paginationAlign }">
     </el-pagination>
   </div>
@@ -63,7 +63,7 @@ export default {
     },
     border: {
       type: Boolean,
-      default: true,
+      default: false,
     },
     showHeader: {
       type: Boolean,
@@ -75,12 +75,16 @@ export default {
     },
     heightNum: {
       type: Number,
-      default: 265,
+      default: 355,
     },
     maxHeight: {
       type: Number,
       default: 500
     },
+    minHeight: {
+      type: Number,
+      default: undefined
+    },
     heightNumSetting: {
       type: Boolean,
       default: false,
@@ -93,6 +97,10 @@ export default {
       type: String,
       default: 'left',
     },
+    calcHeight: {
+      type: Number,
+      default: 170
+    },
     merge: Array,
   },
   components: {
@@ -100,7 +108,7 @@ export default {
   },
   data () {
     return {
-      tableHeight: '',
+      tableHeight: 'auto',
       mergeLine: {},
       mergeIndex: {},
       selected: ''
@@ -128,8 +136,63 @@ export default {
     },
     getHeight () {
       if (!this.heightNumSetting) {
-        this.tableHeight = window.innerHeight - this.heightNum
+        let _this = this
+        if (this.heightNum) {
+          _this.$nextTick(() => {
+            if (document.querySelector(".tags-view-container")) {
+              window.addEventListener('resize', () => {
+                if (_this.calcHeight == 230) {
+                  _this.tableHeight = _this.calcHeightx(192)
+                } else {
+                  _this.tableHeight = _this.calcHeightx(_this.calcHeight)
+                }
+              });
+              if (_this.calcHeight == 230) {
+                _this.tableHeight = _this.calcHeightx(192)
+              } else {
+                _this.tableHeight = _this.calcHeightx(_this.calcHeight)
+              }
+            } else {
+              window.addEventListener('resize', () => {
+                _this.tableHeight = _this.calcHeightx(_this.calcHeight)
+              });
+              _this.tableHeight = _this.calcHeightx(_this.calcHeight)
+            }
+          })
+        } else {
+          _this.tableHeight = window.innerHeight - _this.heightNum
+        }
+      } else {
+        this.tableHeight = this.heightNum
+        this.$nextTick(() => {
+          this.minHeight && (document.getElementById('heightNumSetting').style.minHeight = this.minHeight + 'px')
+        })
+      }
+    },
+    calcHeightx (value, wappered = true) {
+      //项目自定义的公共header部分的高度，可忽略
+      let header = document.querySelector(".from-clues-header").offsetHeight;
+
+      //value为动态计算table界面高度时，减去的其他空白部分，需自行在调试找到临界值，剩下的就是table表格的高度（包含header+body部分）
+      value = value == undefined ? 100 : value;
+      if (document.querySelector(".tags-view-container")) {
+        let tagsView = document.querySelector(".tags-view-container").offsetHeight;
+        var res = window.innerHeight - parseInt(header) - value - parseInt(tagsView);
+      } else {
+        var res = window.innerHeight - parseInt(header) - value;
       }
+      if (wappered) {
+        //通过原生方法，获取dom节点的高度------获取element-ui table表格body的元素
+        let wapper = window.document.getElementsByClassName('el-table__body-wrapper');
+        //通过原生方法，获取dom节点的高度------获取element-ui table表格header的元素
+        let header = window.document.getElementsByClassName('el-table__header-wrapper');
+        //必须加延时，要不然赋不上去值
+        setTimeout(() => {
+          //通过上边计算得到的table高度的value值，减去table表格的header高度，剩下的通过dom节点直接强行赋给table表格的body
+          wapper[0].style.height = (value - header[0].clientHeight)
+        }, 100)
+      }
+      return res;
     },
     clearSelection () {
       this.$refs.elTable.clearSelection()
@@ -220,13 +283,7 @@ export default {
   padding-right: 3px;
 }
 
-.table-radio {
-  /deep/.el-radio__label {
-    display: none;
-  }
-}
-
-/deep/.el-radio {
-  margin-right: 5px !important;
+/deep/.el-radio__label {
+  display: none;
 }
 </style>

+<!--
+ * @Description: 
+ * @Autor: renchao
+ * @LastEditTime: 2023-04-26 16:05:28
+-->
 <template>
   <div class='batchDel'>
     <lb-table :column="columns" :data="formData.dataList" :maxHeight="460" :heightNumSetting="true" :pagination="false"

@@ -53,10 +53,10 @@
       </el-select>
       <el-table :data="taskCommentList" size="mini" border header-cell-class-name="table-header-gray">
         <el-table-column label="序号" header-align="center" align="center" type="index" width="55px" />
-        <el-table-column label="环节名称" prop="taskName" minWidth="150px" align="center" />
-        <el-table-column label="办理人" prop="assigneeName" minWidth="100px" align="center" />
-        <el-table-column label="处理时间" prop="createTime" width="140px" align="center" />
-        <el-table-column label="办结时间" prop="finishTime" width="140px" align="center" />
+        <el-table-column label="环节名称" prop="taskName" minWidth="150" align="center" />
+        <el-table-column label="办理人" prop="assigneeName" minWidth="100" align="center" />
+        <el-table-column label="处理时间" prop="createTime" width="160" align="center" />
+        <el-table-column label="办结时间" prop="finishTime" width="160" align="center" />
         <el-table-column label="操作方式" align="center">
         </el-table-column>
       </el-table>

@@ -16,7 +16,7 @@
           <span class="iconName">{{ item.name }}</span>
         </li>
       </ul>
-      <NoticeBar class="NoticeBar" :noticeList="noticeList" />
+      <NoticeBar class="NoticeBar" :noticeList="noticeList" v-if="noticeList.length > 0" />
     </div>
     <!-- 内容框架 -->
     <div class="containerFrame">

@@ -13,10 +13,10 @@
       <ul>
         <li @click="operation(item)" v-for="(item, index) in rightButtonList" :key="index">
           <svg-icon class="icon" :icon-class="item.icon" />
-          <span class="iconName">{{ item.name }} {{item.value }}</span>
+          <span class="iconName">{{ item.name }} {{ item.value }}</span>
         </li>
       </ul>
-      <NoticeBar class="NoticeBar" :noticeList="noticeList" />
+      <NoticeBar class="NoticeBar" :noticeList="noticeList" v-if="noticeList.length > 0" />
     </div>
     <!-- 内容框架 -->
     <div class="containerFrame">

@@ -86,9 +86,8 @@
     </div>
     <div class="from-clues-content">
       <lb-table :page-size="pageData.size" class="loadingtext" @sort-change="handleSort"
-        :current-page.sync="pageData.currentPage" :heightNum="335" :total="tableData.total"
-        @size-change="handleSizeChange" @p-current-change="handleCurrentChange" :column="tableData.columns"
-        :data="tableData.data">
+        :current-page.sync="pageData.currentPage" :total="tableData.total" @size-change="handleSizeChange"
+        @p-current-change="handleCurrentChange" :column="tableData.columns" :data="tableData.data">
       </lb-table>
     </div>
     <searchBox v-model="isSearch" @getSearch="getSearch" :advancedForm="otherForm" />

@@ -2,10 +2,10 @@
   <div class="from-clues">
     <!-- 表单部分 -->
     <div class="from-clues-header">
-      <el-form :model="queryForm" ref="queryForm" @submit.native.prevent label-width="80px">
+      <el-form :model="queryForm" ref="queryForm" @submit.native.prevent label-width="100px">
         <el-row>
           <el-col :span="5">
-            <el-form-item label="业务来源" label-width="70px">
+            <el-form-item label="业务来源">
               <el-select v-model="queryForm.ywly" class="width100" filterable clearable placeholder="请选择业务来源">
                 <el-option v-for="item in dictData['ywly']" :key="item.dcode" :label="item.dname" :value="item.dcode">
                 </el-option>
@@ -42,26 +42,26 @@
             </el-form-item>
           </el-col>
         </el-row>
-         <el-row>
-           <el-col :span="5">
+        <el-row>
+          <el-col :span="5">
             <el-form-item label="不动产单元号">
               <el-input placeholder="请输入不动产单元号" v-model="queryForm.bdcdyh" clearable class="width100">
               </el-input>
             </el-form-item>
           </el-col>
-           <el-col :span="5">
+          <el-col :span="5">
             <el-form-item label="申请人">
               <el-input placeholder="如需要模糊查询，前后输入%" v-model="queryForm.sqrmc" clearable class="width100">
               </el-input>
             </el-form-item>
           </el-col>
-           <el-col :span="5">
+          <el-col :span="5">
             <el-form-item label="申请人证件号">
               <el-input placeholder="如需要模糊查询，前后输入%" v-model="queryForm.sqrzjhm" clearable class="width100">
               </el-input>
             </el-form-item>
           </el-col>
-           <el-col :span="5">
+          <el-col :span="5">
             <el-form-item label="坐落">
               <el-input placeholder="如需要模糊查询，前后输入%" v-model="queryForm.zl" clearable class="width100">
               </el-input>
@@ -140,7 +140,7 @@ export default {
           // })
           // this.pageData.total = total;
           // this.tableData.data = records
-           this.tableData.total = total ? total : 0;
+          this.tableData.total = total ? total : 0;
           this.tableData.data = records ? records : [];
         }
       })