Просмотр исходного кода

eqDetaileDialog.vue popover修改

yunxing 4 лет назад
Родитель
Сommit
29149dfc12
1 измененных файлов с 23 добавлено и 17 удалено
  1. 23 17
      src/views/equipment/table/eqDetaileDialog.vue

+ 23 - 17
src/views/equipment/table/eqDetaileDialog.vue

@@ -58,19 +58,12 @@
                 <!-- 多余的筛选 -->
                 <input-dialog :type='1' @confirm='confirm'></input-dialog>
             </div>
-            <div class='gdqd-dialog-bottom'>
-                <el-table
-                    @row-click='innerTable'
-                    :data='tableData'
-                    :key='key'
-                    :border='true'
-                    style='width: 100%'
-                    :highlight-current-row='true'
-                >
+            <div class='gdqd-dialog-bottom' ref='table-container-1'>
+                <el-table @row-click='innerTable' :data='tableData' :key='key' :border='true' style='width: 100%' :highlight-current-row='true'>
                     <el-table-column type='index' label='序号' width='60'>
                         <template slot-scope='{row,$index}'>
-                            <div v-if='row.assetuid'>{{$index + 1}}</div>
-                            <el-popover v-else placement='top' width='100' trigger='click'>
+                            <div v-if='!row.assetuid'>{{$index + 1}}</div>
+                            <el-popover v-else placement='top' width='100' trigger='click' popper-class='m-popover'>
                                 <el-button type='text' @click='goToGC(row.assetuid)'>跳转工程信息化</el-button>
                                 <div slot='reference'>{{$index + 1}}</div>
                             </el-popover>
@@ -269,15 +262,28 @@ export default {
         if (document.body.clientWidth >= 1920) {
             this.size = 9
         }
+        // 滚动时,隐藏上部表格的popover
         window.addEventListener('scroll', this.handleScroll, true)
+        this.$once('hook:beforeDestroy', () => {
+            window.removeEventListener('scroll', this.handleScroll)
+        })
     },
     props: ['row', 'major', 'sign', 'smsxt', 'diff'],
     methods: {
-        handleScroll() {
-            // console.log('handleScroll')
-            // let arr = Array.from(window.document.querySelector('.el-popover'))
-            // arr.map((item) => (item.style.display = 'none'))
-            // window.document.querySelector('.el-popover').style.display = 'none'
+        // 页面
+        handleScroll(e) {
+            // let popoverArr = Array.from(document.querySelectorAll('body>.m-popover'))
+            // if (popoverArr.length) {
+            //     popoverArr.map((item) => (item.style.display = 'none'))
+            // }
+            // 滚动时,如果是上部表格,隐藏上部表格的popover
+            this.$nextTick(() => {
+                if (this.$refs['table-container-1'].contains(e.target)) {
+                    document.body.click()
+                    document.dispatchEvent(new CustomEvent('mousedown'))
+                    document.dispatchEvent(new CustomEvent('mouseup'))
+                }
+            })
         },
         innerTable(row) {
             this.assetnum = row.assetnum
@@ -592,7 +598,7 @@ export default {
     }
 }
 // 弹出弹窗样式修改
-.el-popover {
+.m-popover {
     padding: 0 !important;
     text-align: center !important;
 }