pop标签漂移问题

src/views/modules/sys/workClient/WorkClientForm.vue

@@ -4,7 +4,7 @@
       :title="title"
       :close-on-click-modal="false"
       v-dialogDrag
-      width="800px"
+      width="1200px"
       @close="close(),closeXTable()"
       @keyup.enter.native="doSubmit"
       :visible.sync="visible">
@@ -23,7 +23,9 @@
               v-model="visable"
               placement="left"
               width="400"
-              trigger="click">
+              trigger="click"
+              :popper-options="{ boundariesElement: 'viewport', removeOnDestroy: true }"
+              ref="pop">
               <vxe-table
                 border="inner"
                 auto-resize
@@ -187,13 +189,13 @@
             </el-form-item>
           </el-col>
 
-          <el-col :span="12">
+          <el-col :span="24">
             <el-form-item label="注册地址" prop="workClientInfo.registerAddress">
               <el-input v-model="inputForm.workClientInfo.registerAddress" placeholder="请填写注册地址"></el-input>
             </el-form-item>
           </el-col>
 
-          <el-col :span="12">
+          <el-col :span="24">
             <el-form-item label="详细地址" prop="workClientInfo.address">
               <el-input v-model="inputForm.workClientInfo.address" placeholder="请填写详细地址"></el-input>
             </el-form-item>
@@ -232,22 +234,22 @@
           :edit-config="{trigger: 'click', mode: 'row', showStatus: true, autoClear: true}"
         >
 
-          <vxe-table-column field="ourBank" title="开户银行" :edit-render="{type: 'default'}">
+          <vxe-table-column field="ourBank" title="开户银行" >
             <template v-slot:edit="scope" >
               <el-input v-model="scope.row.ourBank" ></el-input>
             </template>
           </vxe-table-column>
-          <vxe-table-column field="bankNumber" title="开户账号" :edit-render="{type: 'default'}">
+          <vxe-table-column field="bankNumber" title="开户账号" >
             <template v-slot:edit="scope" >
               <el-input v-model="scope.row.bankNumber" ></el-input>
             </template>
           </vxe-table-column>
-          <vxe-table-column field="remarks" title="备注信息" :edit-render="{type: 'default'}">
+          <vxe-table-column field="remarks" title="备注信息" >
             <template v-slot:edit="scope" >
               <el-input v-model="scope.row.remarks" ></el-input>
             </template>
           </vxe-table-column>
-          <vxe-table-column label="操作" width="100">
+          <vxe-table-column title="操作" width="100">
             <template v-slot="scope">
               <el-button size="mini" type="danger" @click="removeEvent(scope.row,scope.$rowIndex,'bank')">删除</el-button>
             </template>
@@ -276,42 +278,42 @@
           :edit-config="{trigger: 'click', mode: 'row', showStatus: true, autoClear: true}"
         >
 
-        <vxe-table-column field="name" title="联系人姓名" :edit-render="{type: 'default'}">
+        <vxe-table-column field="name" title="联系人姓名" >
           <template v-slot:edit="scope">
             <el-input v-model="scope.row.name" ></el-input>
           </template>
         </vxe-table-column>
-        <vxe-table-column field="office" title="部门" :edit-render="{type: 'default'}">
+        <vxe-table-column field="office" title="部门" >
           <template v-slot:edit="scope">
             <el-input v-model="scope.row.office" ></el-input>
           </template>
         </vxe-table-column>
-        <vxe-table-column field="position" title="职务" :edit-render="{type: 'default'}">
+        <vxe-table-column field="position" title="职务" >
           <template v-slot:edit="scope">
             <el-input v-model="scope.row.position" ></el-input>
           </template>
         </vxe-table-column>
-        <vxe-table-column field="qq" title="QQ" :edit-render="{type: 'default'}">
+        <vxe-table-column field="qq" title="QQ" >
           <template v-slot:edit="scope">
             <el-input v-model="scope.row.qq" ></el-input>
           </template>
         </vxe-table-column>
-        <vxe-table-column field="linkPhone" title="联系方式1" :edit-render="{type: 'default'}">
+        <vxe-table-column field="linkPhone" title="联系方式1" >
           <template v-slot:edit="scope">
             <el-input v-model="scope.row.linkPhone" ></el-input>
           </template>
         </vxe-table-column>
-        <vxe-table-column field="linkMobile" title="联系方式2" :edit-render="{type: 'default'}">
+        <vxe-table-column field="linkMobile" title="联系方式2" >
           <template v-slot:edit="scope">
             <el-input v-model="scope.row.linkMobile" ></el-input>
           </template>
         </vxe-table-column>
-        <vxe-table-column field="email" title="E-mail" :edit-render="{type: 'default'}">
+        <vxe-table-column field="email" title="E-mail" >
           <template v-slot:edit="scope">
             <el-input v-model="scope.row.email" ></el-input>
           </template>
         </vxe-table-column>
-        <vxe-table-column label="操作" width="100">
+        <vxe-table-column title="操作" width="100">
           <template v-slot="scope">
             <el-button size="mini" type="danger" @click="removeEvent(scope.row,scope.$rowIndex,'linkman')">删除</el-button>
           </template>
@@ -393,6 +395,7 @@
   export default {
     data () {
       return {
+        keyNum: 0,
         visable: false,
         gridData: [],
         radio: 0,
@@ -898,6 +901,7 @@
       closeXTable () {
         this.bankInfos = []
         this.linkmanInfos = []
+        this.closePop()
       },
       rowStyle (event) {
         return 'cursor:pointer;'
@@ -913,13 +917,19 @@
         })
         this.visable = false
       },
-      getPopTable () {
+      async getPopTable () {
         let name = this.inputForm.workClientInfo.name
         if (name !== null && name !== undefined && name !== '') {
-          this.workClientService.findListByName(name).then(({data}) => {
+          await this.workClientService.findListByName(name).then(({data}) => {
             this.gridData = data
           })
         }
+        this.$refs.pop.updatePopper()
+        this.keyNum++
+      },
+      closePop () {
+        this.visable = false
+        this.keyNum++
       }
     }
   }