zcdsj
/
airpredict
5
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix: 选择材料弹窗内健康/环保下拉被遮挡(z-index) 

弹窗 z-index 1100 高于 Ant 下拉默认 1050，导致下拉渲染在弹窗下方、
看起来是空的且选中不生效。给两个 select 加 getPopupContainer 渲染进
弹窗内部，下拉正常显示、选中与筛选恢复正常。

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
zty 2026-06-11 15:13:25 +08:00
parent 7f03b11a95
commit e1dff63c59
1 changed files with 6 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
apps/web/src/components/MaterialPickerModal.vue
View File

@ -13,11 +13,11 @@
<a-radio-button value="self">自建库</a-radio-button> <a-radio-button value="self">自建库</a-radio-button>
</a-radio-group> </a-radio-group>
<span class="lbl" style="margin-left: 20px">健康等级：</span> <span class="lbl" style="margin-left: 20px">健康等级：</span>
<a-select v-model:value="healthGrade" size="small" style="width: 110px" allow-clear placeholder="全部" @change="reload"> <a-select v-model:value="healthGrade" size="small" style="width: 110px" allow-clear placeholder="全部" :get-popup-container="popupContainer" @change="reload">
<a-select-option v-for="g in healthGrades" :key="g" :value="g">{{ g }} 级</a-select-option> <a-select-option v-for="g in healthGrades" :key="g" :value="g">{{ g }} 级</a-select-option>
</a-select> </a-select>
<span class="lbl" style="margin-left: 20px">环保等级：</span> <span class="lbl" style="margin-left: 20px">环保等级：</span>
<a-select v-model:value="envGrade" size="small" style="width: 100px" allow-clear placeholder="全部" @change="reload"> <a-select v-model:value="envGrade" size="small" style="width: 100px" allow-clear placeholder="全部" :get-popup-container="popupContainer" @change="reload">
<a-select-option v-for="g in envGrades" :key="g" :value="g">{{ g }}</a-select-option> <a-select-option v-for="g in envGrades" :key="g" :value="g">{{ g }}</a-select-option>
</a-select> </a-select>
</div> </div>
@ -137,6 +137,10 @@ const rowState = reactive<Record<string, { checked: boolean; area: number | null
const picked = computed(() => new Set(props.existingIds)); const picked = computed(() => new Set(props.existingIds));
// 让下拉渲染进弹窗内部，避免被弹窗 z-index 盖住（否则下拉看起来是空的）
const popupContainer = (trigger: HTMLElement) =>
(trigger.closest('.ant-modal-content') as HTMLElement) || document.body;
// 大类 -> 子类[] // 大类 -> 子类[]
const tree = computed(() => { const tree = computed(() => {
const map = new Map<string, string[]>(); const map = new Map<string, string[]>();