style

src/components/Sticky/index.vue

@@ -0,0 +1,91 @@
+<template>
+  <div :style="{height:height+'px',zIndex:zIndex}">
+    <div
+      :class="className"
+      :style="{top:(isSticky ? stickyTop +'px' : ''),zIndex:zIndex,position:position,width:width,height:height+'px'}"
+    >
+      <slot>
+        <div>sticky</div>
+      </slot>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'Sticky',
+  props: {
+    stickyTop: {
+      type: Number,
+      default: 0
+    },
+    zIndex: {
+      type: Number,
+      default: 1
+    },
+    className: {
+      type: String,
+      default: ''
+    }
+  },
+  data() {
+    return {
+      active: false,
+      position: '',
+      width: undefined,
+      height: undefined,
+      isSticky: false
+    }
+  },
+  mounted() {
+    this.height = this.$el.getBoundingClientRect().height
+    window.addEventListener('scroll', this.handleScroll)
+    window.addEventListener('resize', this.handleReize)
+  },
+  activated() {
+    this.handleScroll()
+  },
+  destroyed() {
+    window.removeEventListener('scroll', this.handleScroll)
+    window.removeEventListener('resize', this.handleReize)
+  },
+  methods: {
+    sticky() {
+      if (this.active) {
+        return
+      }
+      this.position = 'fixed'
+      this.active = true
+      this.width = this.width + 'px'
+      this.isSticky = true
+    },
+    handleReset() {
+      if (!this.active) {
+        return
+      }
+      this.reset()
+    },
+    reset() {
+      this.position = ''
+      this.width = 'auto'
+      this.active = false
+      this.isSticky = false
+    },
+    handleScroll() {
+      const width = this.$el.getBoundingClientRect().width
+      this.width = width || 'auto'
+      const offsetTop = this.$el.getBoundingClientRect().top
+      if (offsetTop < this.stickyTop) {
+        this.sticky()
+        return
+      }
+      this.handleReset()
+    },
+    handleReize() {
+      if (this.isSticky) {
+        this.width = this.$el.getBoundingClientRect().width + 'px'
+      }
+    }
+  }
+}
+</script>

src/views/ManufacturingCenter/ProjectPlanningQuery/index.vue

@@ -115,7 +115,9 @@
     </el-card>
 
     <el-card>
+      <sticky :z-index="10">
         <h1 class="word">设计</h1>
+      </sticky>
       <el-table v-loading="loading1" :data="tableData1" highlight-current-row style="width: 100%;" stripe border element-loading-text="拼命加载中">
         <el-table-column label="组号" align="center" min-width="100px">
           <template slot-scope="scope">
@@ -153,9 +155,9 @@
           </template>
         </el-table-column>
       </el-table>
-    </el-card>
-    <el-card>
+      <sticky :z-index="11">
         <h1 class="word">采购</h1>
+      </sticky>
       <el-table v-loading="loading1" :data="tableData2" highlight-current-row style="width: 100%;" stripe border element-loading-text="拼命加载中">
         <el-table-column label="组号" align="center" min-width="100px">
           <template slot-scope="scope">
@@ -195,7 +197,9 @@
       </el-table>
     </el-card>
     <el-card>
+      <sticky :z-index="12">
         <h1 class="word">备料</h1>
+      </sticky>
       <el-table v-loading="loading1" :data="tableData3" highlight-current-row style="width: 100%;" stripe border element-loading-text="拼命加载中">
         <el-table-column label="组号" align="center" min-width="100px">
           <template slot-scope="scope">
@@ -235,7 +239,9 @@
       </el-table>
     </el-card>
     <el-card>
+      <sticky :z-index="13">
         <h1 class="word">制造</h1>
+      </sticky>
       <el-table v-loading="loading1" :data="tableData4" highlight-current-row style="width: 100%;" stripe border element-loading-text="拼命加载中">
         <el-table-column label="组号" align="center" min-width="100px">
           <template slot-scope="scope">
@@ -275,7 +281,9 @@
       </el-table>
     </el-card>
     <el-card>
+      <sticky :z-index="14">
         <h1 class="word">装配调试</h1>
+      </sticky>
       <el-table v-loading="loading1" :data="tableData5" highlight-current-row style="width: 100%;" stripe border element-loading-text="拼命加载中">
         <el-table-column label="组号" align="center" min-width="100px">
           <template slot-scope="scope">
@@ -317,9 +325,11 @@
   </div>
 </template>
 
-<script>import { initProject, initMachine, searchtable, searchtable2 } from '@/api/ManufacturingCenter/ProjectPlanningQuery'
-
+<script>
+import { initProject, initMachine, searchtable, searchtable2 } from '@/api/ManufacturingCenter/ProjectPlanningQuery'
+import Sticky from '@/components/Sticky'
 export default {
+  components: { Sticky },
   data() {
     return {
       projectValue: '',
@@ -539,9 +549,12 @@ export default {
     margin-bottom: 10px;
   }
   .word{
-    /*font-size: 20px;*/
-    /*margin-bottom: 20px;*/
+    border: 1px solid #ebeef5;
     margin-top: 0;
+    margin-bottom: 20px;
+    line-height: 60px;
+    /*height: 50px;*/
+    background-color: white;
   }
   span{
     margin: 10px 0 10px 10px;
@@ -559,5 +572,6 @@ export default {
 <style>
   .bold-font .el-table{
     font: bold 18px arial!important;
+    margin: 20px 0 10px 0;
   }
 </style>