表格高度修改

src/components/Table/index.vue

@@ -1,12 +1,12 @@
 <template>
   <div class="data-table" :style="{ marginTop: marginTop }">
-    <div :style="{ 'min-height': minHeight + 'vh' }" v-loading="loading" element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.8)" class="data-table-content">
+    <div :style="dataTableContentStyle" v-loading="loading" element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.8)" class="data-table-content">
       <div v-if="isBtn" class="data-table-btn flex-end">
         <el-button size="small" @click="handleAdd" plain type="primary">新增</el-button>
       </div>
       <template v-if="tableData.length">
         <div>
-          <el-table :data="filteredTableData" :summary-method="getSummaries" :span-method="tableSpanMethod" stripe :show-summary="showSummary" border ref="table" :height="minHeight - 8 + 'vh'" class="table infinite-list" style="width: 100%; overflow: auto" @select="selectHandler">
+          <el-table :data="filteredTableData" :summary-method="getSummaries" :span-method="tableSpanMethod" stripe :show-summary="showSummary" border ref="table" :height="tableHeight ? tableHeight : (minHeight - 8 + 'vh')" class="table infinite-list" style="width: 100%; overflow: auto" @select="selectHandler">
             <el-table-column
               v-if="selectionEnable"
               type="selection"
@@ -57,7 +57,7 @@
         </div>
       </template>
       <template v-else>
-        <NoData />
+        <NoData image-width="auto" image-height="100%" />
       </template>
     </div>
     <div class="data-table-dialog">
@@ -127,10 +127,11 @@ export default {
     },
     //接口ID
     dataId: {
-      type: String || Number,
+      type: [String, Number],
+      default: ''
     },
     editId: {
-      type: String || Number,
+      type: [String, Number],
       default: ''
     },
     dataContent: {
@@ -153,6 +154,10 @@ export default {
       default: "80px",
     },
     //表格高度
+    tableHeight: {
+      type: [String, Number],
+      default: 0
+    },
     minHeight: {
       type: Number,
       default: 65,
@@ -226,6 +231,16 @@ export default {
     };
   },
   computed: {
+    dataTableContentStyle() {
+      const style = {}
+      if (this.minHeight) {
+        style['min-height'] = this.minHeight
+      }
+      if (this.tableHeight) {
+        style['height'] = this.tableHeight
+      }
+      return style
+    },
     //设置表头-下拉-箭头样式
     arrowClass () {
       return function (prop) {
@@ -359,7 +374,7 @@ export default {
     //初始化表格
     initTableData () {
       this.tableColsCopy = this.tableCols.filter((item) => item.needShow);
-      console.log(this.tableColsCopy)
+      // console.log(this.tableColsCopy)
       this.tableDataCopy = _.cloneDeep(this.tableData);
       const datas = _.cloneDeep(this.tableColsCopy);
       const reqUts = []
@@ -373,7 +388,7 @@ export default {
           // const reqUt = this.getSelectData(item.listqueryTemplateID)
           // reqUts.push(reqUt)
           this.tableOptions[item.columnName] = await this.getSelectData(item.listqueryTemplateID)
-          console.log(this.tableOptions[item.columnName])
+          // console.log(this.tableOptions[item.columnName])
         }
         // this.filterValues[item.columnName] = ''
       });
@@ -626,6 +641,9 @@ export default {
       .cell {
         font-weight: bold;
         color: #101116;
+        > .el-checkbox {
+        display: none;
+      }
       }
       .has-gutter {
         tr {
@@ -634,9 +652,6 @@ export default {
           }
         }
       }
-      .table-column--selection .cell .el-checkbox {
-        display: none;
-      }
     }
     .el-table__body-wrapper {
       tr.bgl-hui {

src/components/TableHeaderCell/index.vue

@@ -1,7 +1,7 @@
 <!--
  * @Author: Badguy
  * @Date: 2022-05-25 14:09:35
- * @LastEditTime: 2022-05-30 16:23:25
+ * @LastEditTime: 2022-06-13 11:18:50
  * @LastEditors: your name
  * @Description: 表头下拉筛选
  * have a nice day!
@@ -70,11 +70,11 @@ export default {
       default: ''
     },
     filterOptions: {
-      type: Array || undefined,
+      type: [Array, undefined],
       default: undefined
     },
     filterValues: {
-      type: Array || undefined,
+      type: [Array, undefined],
       default: undefined
     },
     sortable: {

src/components/nodata/index.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="nodata">
-    <div :style="{ width: imageWidth+'px',height:imageHeight+'px'}" class="nodata_image">
+    <div :style="style" class="nodata_image">
       <img src="../../assets/logo/nodata.png" alt="" srcset="">
     </div>
   </div>
@@ -11,19 +11,30 @@ export default {
   name: 'NoData',
   props: {
     imageWidth: {
-      type: Number,
+      type: [String, Number],
       default: 460
     },
     imageHeight: {
-      type: Number,
+      type: [String, Number],
       default: 320
     }
+  },
+  computed: {
+    style() {
+      const that = this
+      const style = {
+        width: typeof that.imageWidth === 'number' ? that.imageWidth + 'px' : that.imageWidth,
+        height: typeof that.imageHeight === 'number' ? that.imageHeight + 'px' : that.imageHeight
+      }
+      return style
+    }
   }
 }
 </script>
 
 <style lang="scss" scoped>
 .nodata {
+  height: 100%;
   padding: 40px;
   display: flex;
   justify-content: center;
@@ -31,9 +42,9 @@ export default {
   .nodata_image {
     overflow: hidden;
     img {
-      width: 100%;
       height: 100%;
+      object-fit: cover
     }
   }
 }
-</style>
+</style>

src/views/systemSettings/views/serviceManagement/serviceEdit.vue

@@ -1,6 +1,6 @@
 <!--
  * @Date: 2022-03-24 09:55:13
- * @LastEditTime: 2022-06-11 22:26:55
+ * @LastEditTime: 2022-06-13 11:38:17
  * @LastEditors: your name
  * @Description: 服务管理-编辑服务
  * have a nice day!
@@ -9,7 +9,10 @@
 <template>
   <div class="service-edit">
     <div class="scrollbar">
-      <div class="service-form-wrapper service-edit-wrapper">
+      <div
+        ref="formWrap"
+        class="service-form-wrapper service-edit-wrapper"
+      >
         <header class="title">
           <p class="manageTitle">服务</p>
           <el-button
@@ -316,7 +319,7 @@
               data-id="7"
               :data-content="{ serviceID: serviceID }"
               :rows="12"
-              :min-height="45"
+              :table-height="computedTableHeight"
               margin-top="0"
               :is-btn="false"
               :is-dialog="true"
@@ -339,7 +342,7 @@
               data-id="3"
               :data-content="{ serviceID: serviceID }"
               :rows="12"
-              :min-height="45"
+              :table-height="computedTableHeight"
               margin-top="0"
               :is-btn="false"
               :is-dialog="true"
@@ -397,6 +400,7 @@ export default {
         frequencyCount: null,
         frequencyUnit: null
       },
+      computedTableHeight: '200px',
       targetList: [],
       protocolList: [],
       nodeList: [],
@@ -414,6 +418,14 @@ export default {
     this.queryServiceByID(this.serviceID)
     this.getDataSourceList()
   },
+  updated() {
+    const headerHeight = 80 + 24
+    const bottomBlankHeight = 16
+    const formWrapHeight = this.$refs['formWrap'].offsetHeight
+    const tableWrapHeaderHeight = 26 + 32 + 24
+    const tableWrapPadding = 20 * 2
+    this.computedTableHeight = `calc(100vh - ${headerHeight + formWrapHeight + bottomBlankHeight + tableWrapHeaderHeight + tableWrapPadding}px)`
+  },
   methods: {
     editSubmitHandler() {
       this.$refs['serviceForm'].validate(valid => {
@@ -566,7 +578,6 @@ export default {
     }
     .service-tables {
       width: 100%;
-      // height: ;
       display: flex;
       margin: 0 -12px;
       .service-table-wrapper {