這里記錄一個(gè)作為前端初學(xué)者使用vue+elementUI遇到的問(wèn)題（犯的錯(cuò)誤）。
在項(xiàng)目里身弊，用一張表來(lái)展示所有的編譯記錄以清，每個(gè)文件的編譯結(jié)果為一條記錄叠必。需要實(shí)現(xiàn)點(diǎn)擊展示項(xiàng)目編譯結(jié)果，如圖,當(dāng)點(diǎn)擊log的時(shí)候失尖，會(huì)彈出響應(yīng)的log內(nèi)容啊奄。
問(wèn)題的重現(xiàn),運(yùn)行2個(gè)（或者多個(gè)）文件，然后點(diǎn)擊log會(huì)發(fā)現(xiàn)出現(xiàn)彈出框重疊的現(xiàn)象掀潮。仔細(xì)看會(huì)發(fā)現(xiàn)上層dialog即當(dāng)前真正點(diǎn)擊的log的結(jié)果菇夸，底層的dialog是別的行的log, 按下F12查看頁(yè)面html source可以發(fā)現(xiàn)html同時(shí)渲染了n個(gè)(n=table length) dialog，只是z-index不同仪吧，分析代碼發(fā)現(xiàn)其實(shí)錯(cuò)誤很淺顯庄新，即我用一個(gè)全局變量來(lái)控制dialog的顯示，而且dialog標(biāo)簽被嵌套在el-table里邑商，因此table有幾行就有幾個(gè)dialog,而且通過(guò)同一個(gè)變量來(lái)控制摄咆，那當(dāng)然出問(wèn)題：
記錄下這個(gè)問(wèn)題的解決辦法：
- 把<el-dialog>移出<el-table>，還是用一個(gè)全局變量來(lái)控制dialog的顯示人断。 即全局只有一個(gè)el-dialog吭从，適用于我這個(gè)項(xiàng)目的場(chǎng)景：一個(gè)時(shí)間只要顯示一個(gè)log dialog。但不適用于你的項(xiàng)目本來(lái)就是要同時(shí)顯示多個(gè)el-dialog.
2.table里每行都有dialog, table數(shù)據(jù)每一行都有個(gè)變量用于控制每行的dialog的顯示恶迈。但是要注意vue的響應(yīng)式數(shù)據(jù)更新機(jī)制涩金，這個(gè)變量必須要在table數(shù)據(jù)聲明的時(shí)候就一起聲明。比如我必須在填塞table數(shù)據(jù)的時(shí)候就把這個(gè)變量寫出來(lái), 從而在點(diǎn)擊log標(biāo)題的click事件中去操作這個(gè)變量的true/false;
ts
this.inputs.push({
files: this.form.files,
whList: this.form.whList,
whString: whString,
fileList: fileList,
dialogVisible: false
});
vue
<el-table>
...
<el-table-column prop="log" label="log" width="250px">
<template v-slot="scope">
<el-button type="text" @click="onPopupRunLog(scope.row)">{{scope.row.fullDisplayName}}
</el-button>
<el-dialog close-on-press-escape
title="Build Log"
:visible.sync="scope.row.dialogVisible" width="80%">
<pre>{{scope.row.log}}</pre>
</el-dialog>
</template>
</el-table-column>
</el-table>
- 把2中vue的這串抽成一個(gè)component.所有的參數(shù)傳入這個(gè)組件也能完美解決這個(gè)問(wèn)題暇仲。實(shí)踐發(fā)現(xiàn)這種方法最為優(yōu)秀步做。
<template>
<div>
<el-button style="padding:0px;font-size: 10px" type="text" @click="popupBuildLog()"
:loading="loading" element-loading-text=""
element-loading-spinner="el-icon-loading"
element-loading-background="#c4d1d2ba" >
{{buttonContent}}
</el-button>
<div style="display:inline-block; margin-top:4px" v-if="!stillBuilding && buildResult !== 'PENDING'">
<span style="color:#afa7a7e6;margin-left:8px">{{startedAgoTime}}</span>
</div>
<el-dialog class="log-dialog" title="Build Log"
:visible.sync="dialogShow"
width="80%" append-to-body>
<pre>{{log}}</pre>
</el-dialog>
</div>
</template>
