style:整体样式的修改table高度自动计算

 import dialogBox from '@/components/DialogBox'
 import LbTable from '@/components/LbTable'
 import Theme from '@/components/Theme.vue'
+import Breadcrumb from "@/components/Breadcrumb.vue";
 // 引入按钮
 import btn from '@/components/Button.vue'
 import Popup from '@/components/Popup/index'
@@ -8,6 +9,7 @@ import MessageBox from '@/components/MessageBox/index.js'
 export default {
   install: (Vue) => {
     Vue.component('dialogBox', dialogBox);
+    Vue.component('Breadcrumb', Breadcrumb);
     Vue.component('btn', btn);
     Vue.component('lbTable', LbTable);
     Vue.component('Theme', Theme);

 <template>
-  <div class="breadcrumb">
-    <el-breadcrumb class="app-breadcrumb" separator-class="el-icon-arrow-right">
-      <transition-group name="breadcrumb">
-        <el-breadcrumb-item v-for="(item, index) in levelList" :key="item.path">
-          <span
-            v-if="
-              item.redirect === 'noRedirect' || index == levelList.length - 1
-            "
-            class="no-redirect"
-            >{{ item.meta.title }}</span
-          >
-          <a v-else @click.prevent="handleLink(item)">{{ item.meta.title }}</a>
-        </el-breadcrumb-item>
-      </transition-group>
-    </el-breadcrumb>
-  </div>
+  <el-breadcrumb class="breadcrumb" separator-class="el-icon-arrow-right">
+    <transition-group name="breadcrumb">
+      <el-breadcrumb-item v-for="(item, index) in levelList" :key="item.path">
+        当前页面：
+        <span @click.prevent="handleLink(item)">{{ item.meta.title }}</span>
+      </el-breadcrumb-item>
+    </transition-group>
+  </el-breadcrumb>
 </template>
 
 <script>
 import pathToRegexp from "path-to-regexp";
 
 export default {
-  data() {
+  data () {
     return {
       levelList: null,
     };
   },
   watch: {
-    $route() {
+    $route () {
       this.getBreadcrumb();
     },
   },
-  created() {
+  created () {
     this.getBreadcrumb();
   },
   methods: {
-    getBreadcrumb() {
+    getBreadcrumb () {
       // only show routes with meta.title
-      let matched = this.$route.matched.filter(
+      this.levelList = this.$route.matched.filter(
         (item) => item.meta && item.meta.title
-      );
-      this.levelList = matched.filter(
-        (item) => item.meta && item.meta.title
-      );
+      ).slice(-1)
     },
-    isDashboard(route) {
+    isDashboard (route) {
       const name = route && route.name;
       if (!name) {
         return false;
@@ -53,65 +42,55 @@ export default {
         name.trim().toLocaleLowerCase() === "Dashboard".toLocaleLowerCase()
       );
     },
-    pathCompile(path) {
+    pathCompile (path) {
       const { params } = this.$route;
       var toPath = pathToRegexp.compile(path);
       return toPath(params);
-    },
-    handleLink(item) {
-      // const { redirect, path } = item;
-      // if (redirect) {
-      //   this.$router.push(redirect);
-      //   return;
-      // }
-      // this.$router.push(path);
-    },
-  },
-};
+    }
+  }
+}
 </script>
 
 <style lang="scss" scoped>
 .breadcrumb {
-  margin: 15px auto 0;
   box-sizing: border-box;
-  text-indent: 16px;
+  text-indent: 10px;
+  background: linear-gradient(90deg, #0047B8 0%, rgba(0, 26, 95, 0.1) 100%);
+  line-height: 32px;
+  color: #FFFFFF;
 }
+
+/deep/.el-breadcrumb__inner {
+  color: #FFFFFF !important;
+}
+
 .breadcrumb1366 {
   padding: 10px 0 !important;
 }
-.isFullScreen{
+
+.isFullScreen {
   width: calc(100% - 20px);
   margin: 0 auto;
-  padding: 10px!important;
+  padding: 10px !important;
 }
+
 .cur-location {
   font-size: 16px;
   color: white;
   line-height: 40px;
   float: left;
+
   img {
     position: relative;
     top: 3px;
     margin-right: 4px;
   }
 }
-.app-breadcrumb.el-breadcrumb {
-  display: inline-block;
-  font-size: 14px;
-  // line-height: 40px;
-  .no-redirect {
-    color: white;
-    cursor: text;
-  }
-}
+
 .el-breadcrumb__inner a,
 .el-breadcrumb__inner.is-link {
   color: white;
   cursor: text;
   font-weight: normal;
 }
-// .el-breadcrumb__inner a:hover,
-// .el-breadcrumb__inner.is-link:hover {
-//   text-decoration: underline;
-// }
 </style>

@@ -21,23 +21,20 @@ export default {
 </script>
 <style scoped lang="scss">
 .button {
-  width: 80px; //适配4字按钮样式
+  width: 76px;
   height: 32px;
   color: #ffffff;
   margin: 0 5px;
+  cursor: pointer;
 }
 
 .cx {
-  background: url('../image/btn.png') no-repeat -4px -40px;
-  cursor: pointer;
+  background: url('../image/btn.png') no-repeat 0 -34px;
+  background-size: cover;
 }
 
 .cz {
-  background: url('../image/btn.png') no-repeat -4px -4px;
-  cursor: pointer;
-}
-
-.sb {
-  background: url('../image/btn.png') no-repeat -4px -112px;
+  background: url('../image/btn.png') no-repeat 0 0;
+  background-size: cover;
 }
 </style>

@@ -74,7 +74,7 @@ export default {
     },
     heightNum: {
       type: Number,
-      default: 345,
+      default: 355,
     },
     maxHeight: {
       type: Number,
@@ -99,7 +99,7 @@ export default {
   },
   data () {
     return {
-      tableHeight: '',
+      tableHeight: 'auto',
       mergeLine: {},
       mergeIndex: {},
       selected: ''
@@ -115,7 +115,6 @@ export default {
     },
   },
   methods: {
-
     // 单选
     singleElection (row) {
       this.selected = this.data.indexOf(row);
@@ -128,8 +127,37 @@ export default {
     },
     getHeight () {
       if (!this.heightNumSetting) {
-        this.tableHeight = window.innerHeight - this.heightNum
+        let _this = this
+        if (this.heightNum) {
+          _this.$nextTick(() => {
+            window.addEventListener('resize', () => {
+              _this.tableHeight = _this.calcHeightx(230)
+            });
+            _this.tableHeight = _this.calcHeightx(230)
+          })
+        } else {
+          _this.tableHeight = window.innerHeight - _this.heightNum
+        }
+      }
+    },
+    calcHeightx (value, wappered = true) {
+      //项目自定义的公共header部分的高度，可忽略
+      let header = document.querySelector(".from-clues-header").offsetHeight;
+      //value为动态计算table界面高度时，减去的其他空白部分，需自行在调试找到临界值，剩下的就是table表格的高度（包含header+body部分）
+      value = value == undefined ? 100 : value;
+      let 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()

 <template>
   <section class="app-main">
-    <!-- <Breadcrumb v-if="judgeRoute()" /> -->
     <transition name="fade-transform" mode="out-in">
       <router-view />
     </transition>
   </section>
 </template>
 <script>
-import Breadcrumb from "@/components/Breadcrumb.vue";
+
 export default {
   name: 'AppMain',
-  components: {
-    Breadcrumb
-  },
-  methods: {
-    judgeRoute(){
-      if (this.$route.path == '/home' || this.$route.path.indexOf('jsbwcx') > -1) {
-        return false
-      }else{
-        return true
-      }
-    }
-  },
   computed: {
     key () {
       return this.$route.path

@@ -79,7 +79,8 @@ export default {
 .xuanzhong {
   background: url('~@/image/selNavbar.png') no-repeat;
   background-size: 100% 100%;
-  color: #09C39A !important;
+  color: #fff;
+  font-weight: 700;
 }
 
 /deep/.el-menu-item:hover {

@@ -36,6 +36,7 @@ export default {
   position: relative;
   height: 100%;
   width: 100%;
+  min-width: 1280px;
   background: url('~@/image/bg.png') no-repeat;
   background-size: 100% 100%;
   padding: 12px;
@@ -48,6 +49,7 @@ export default {
 }
 
 .appMain {
+  min-width: 1290px;
   height: calc(100vh - 101px) !important;
   box-sizing: border-box;
 

@@ -214,6 +214,15 @@ table td {
   color: #4A4A4A;
 }
 
+.twoLineCls {
+  text-overflow: -o-ellipsis-lastline;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  line-clamp: 2;
+  -webkit-box-orient: vertical;
+}
 
 .el-table tr td {
   font-size: 14px;
@@ -426,11 +435,17 @@ table td {
 .el-select-dropdown__item,
 .el-menu--horizontal .el-menu .el-submenu__title {
   background: url("~@/image/slitembg.png") no-repeat;
+  height: 26px;
+  line-height: 26px;
   background-size: 100% 100%;
-  margin: 5px 0;
+  margin-bottom: 7px;
   color: #02D9FD !important;
 }
 
+.el-select-dropdown {
+  top: 203px !important;
+}
+
 .el-menu--horizontal .el-menu--popup .el-menu-item:not(.is-disabled):hover,
 .el-select-dropdown__item:hover,
 .el-select-dropdown__item.selected,
@@ -439,4 +454,10 @@ table td {
   background-size: 100% 100%;
   color: #FFFFFF !important;
   font-weight: 700;
+}
+
+.el-select-dropdown__item.hover,
+.el-select-dropdown__item:hover {
+  background-color: transparent !important;
+  ;
 }
\ No newline at end of file

@@ -40,16 +40,16 @@
 
 //*****start*通用表单查询条件，列表样式******//
 .from-clues {
-    min-width: 1280px;
     height: 100%;
     width: 100%;
+    min-width: 1280px;
     box-sizing: border-box;
     overflow-x: hidden;
     padding: 2px;
 
     &-header {
         width: 100%;
-        padding: 20px 30px 20px 20px;
+        padding: 5px 30px 20px 20px;
         box-sizing: border-box;
         background: url("~@/image/formHeader.png") no-repeat;
         background-size: 100% 100%;
@@ -196,4 +196,4 @@
 .btnColRight {
     box-sizing: border-box;
     text-align: right;
-}
+}
\ No newline at end of file

@@ -8,7 +8,7 @@ class data extends filter {
       {
         prop: 'jcjg',
         label: '检查结果',
-        width: 100,
+        width: 90,
         render: (h, scope) => {
           return (
             <div>
@@ -22,7 +22,7 @@ class data extends filter {
       {
         prop: 'rkjg',
         label: '入库结果',
-        width: 100,
+        width: 80,
         render: (h, scope) => {
           return (
             <div>
@@ -36,12 +36,12 @@ class data extends filter {
       {
         prop: "areacode",
         label: "行政区代码",
-        width: 100,
+        width: 70,
       },
       {
         prop: "areaName",
         label: "行政区名称",
-        width: 100,
+        width: 70,
       },
       {
         prop: "bizMsgid",
@@ -50,10 +50,12 @@ class data extends filter {
       {
         prop: "createdate",
         label: "创建时间",
+        width: 140,
       },
       {
         prop: "recflowid",
         label: "业务流水号",
+        width: 95,
       },
       {
         prop: "estatenum",
@@ -63,14 +65,23 @@ class data extends filter {
       {
         prop: "rectype",
         label: "业务编码",
+        width: 70,
       },
       {
         prop: "rectypeName",
         label: "业务名称",
+        render: (h, scope) => {
+          return (
+            <div>
+              {scope.row.rectypeName}
+            </div>
+          )
+        }
       },
       {
         prop: "receiveDate",
         label: "接收时间",
+        width: 140
       }
     ]
   }

@@ -4,6 +4,9 @@
     <!-- 头部搜索 -->
     <div class="from-clues-header">
       <el-form ref="ruleForm" :model="form" label-width="100px">
+        <el-form-item>
+          <Breadcrumb />
+        </el-form-item>
         <el-row class="mb-5">
           <el-col :span="6">
             <el-form-item label="行政区" prop="qxdm">
@@ -77,7 +80,7 @@
             <el-form-item>
               <btn nativeType="cz" @click="resetForm">重置</btn>
               <btn nativeType="cx" @click="featchData">查询</btn>
-              <btn nativeType="sb">入库</btn>
+              <btn nativeType="cx">入库</btn>
             </el-form-item>
           </el-col>
         </el-row>
@@ -173,7 +176,7 @@ export default {
           .concat([
             {
               label: "操作",
-              width: "160",
+              width: "90",
               render: (h, scope) => {
                 return (
                   <div>