liuhj hace 2 días
padre
commit
20a09471b3
Se han modificado 1 ficheros con 65 adiciones y 10 borrados
  1. 65 10
      src/components/OP/OpDecreasePayments.vue

+ 65 - 10
src/components/OP/OpDecreasePayments.vue

@@ -68,16 +68,15 @@
                             </el-input>
                         </el-form-item>
                     </div> -->
-                    <div style="width: 394px;position: relative;">
-                        <el-button @click="xuanzebtn" style="position: absolute;right: -72px;top: 1px;"
+                    <div style="width: 394px; position: relative;">
+                        <el-button @click="xuanzebtn" style="position: absolute; right: -72px; top: 1px;"
                             type="primary">选择</el-button>
+
                         <el-form-item label="费用名称:" prop="priceName" label-width="160px">
-                            <!-- <el-input placeholder="费用名称" v-model="DecreasePaymentsData.priceName"></el-input> -->
                             <el-autocomplete style="width: 100%;" class="inline-input"
-                                popper-class="auto-width-autocomplete"
-                                v-model="DecreasePaymentsData.priceName" @input="priceNameinput"
-                                :fetch-suggestions="querySearch" placeholder="请输入内容"
-                                @select="priceNameSelect"></el-autocomplete>
+                                popper-class="auto-width-autocomplete" v-model="DecreasePaymentsData.priceName"
+                                @input="priceNameinput" :fetch-suggestions="querySearch" placeholder="请输入内容"
+                                @select="priceNameSelect" :popper-append-to-body="true" />
                         </el-form-item>
                     </div>
                     <div style="width: 394px;">
@@ -728,7 +727,7 @@ export default {
             this.Sumups();
         },
         DecreasePaymentsChange() {
-            this.QueryRate();
+            this.QueryConferenceAffairsChild();
             for (let index = 0; index < this.delegationInfoList.length; index++) {
                 if (this.delegationInfoList[index].id == parseInt(this.DiIdSelect)) {
                     this.delegationInfo = this.delegationInfoList[index];
@@ -1093,6 +1092,9 @@ export default {
             }).then(function (res) {
                 if (res.data.code == 200) {
                     that.QueryConferenceAffairsChildList = res.data.data;
+                    if (that.QueryConferenceAffairsChildList.length > 0) {
+                        that.QueryRate();
+                    }
                     console.log(res.data.data);
                 }
             })
@@ -1205,7 +1207,60 @@ export default {
         width: 260px !important;
     }
 }
-.auto-width-autocomplete{
-    width: auto !important;
+/* ====== 下拉框容器定位修复 ====== */
+.auto-width-autocomplete.el-autocomplete-suggestion {
+  /* ❌ 移除 position: absolute,让 Element UI 自己管理定位 */
+  width: auto !important;
+  min-width: 200px !important;
+  max-width: 700px !important;
+  
+  /* ✅ Safari 硬件加速,修复闪烁/偏移 */
+  transform: translateZ(0) !important;
+  -webkit-transform: translateZ(0) !important;
+  
+  /* ✅ 确保在最顶层,不被抽屉遮盖 */
+  z-index: 99999 !important;
+  
+  /* ✅ 防止被裁剪 */
+  overflow: visible !important;
+}
+
+/* ====== 下拉框滚动容器 ====== */
+.auto-width-autocomplete .el-autocomplete-suggestion__wrap {
+  width: auto !important;
+  max-height: 240px;
+  overflow-y: auto !important;
+  overflow-x: hidden !important;
+  /* Safari 滚动流畅 */
+  -webkit-overflow-scrolling: touch;
 }
+
+/* ====== 下拉框列表 ====== */
+.auto-width-autocomplete .el-autocomplete-suggestion__list {
+  width: auto !important;
+}
+
+/* ====== 每个建议项 ====== */
+.auto-width-autocomplete .el-autocomplete-suggestion__item {
+  white-space: nowrap !important;
+  overflow: hidden !important;
+  text-overflow: ellipsis !important;
+  padding: 8px 16px !important;
+  min-height: 36px !important;
+  line-height: 1.4 !important;
+  /* Safari 点击优化 */
+  -webkit-tap-highlight-color: transparent;
+}
+
+/* ====== 让抽屉不裁剪下拉框 ====== */
+.el-drawer {
+  overflow: visible !important;
+}
+.el-drawer__body {
+  overflow: visible !important;
+}
+.el-drawer__container {
+  overflow: visible !important;
+}
+
 </style>