踩踩Element UI的坑

一:嵌套的 Dialog

如果需要在一個(gè) Dialog 內(nèi)部嵌套另一個(gè) Dialog,需要使用 append-to-body 屬性。正常情況下,我們不建議使用嵌套的 Dialog,如果需要在頁(yè)面上同時(shí)顯示多個(gè) Dialog,可以將它們平級(jí)放置。對(duì)于確實(shí)需要嵌套 Dialog 的場(chǎng)景,我們提供了append-to-body屬性。將內(nèi)層 Dialog 的該屬性設(shè)置為 true,它就會(huì)插入至 body 元素上,從而保證內(nèi)外層 Dialog 和遮罩層級(jí)關(guān)系的正確。

二:表格列屬性fixed="right"不能用在動(dòng)態(tài)的彈出框中

三:去掉輸入框左右兩側(cè)空格,可解決輸入空格也能校驗(yàn)通過(guò)的bug

v-model.trim

四:tooltip寬度太長(zhǎng)

image.jpeg

解決方案:tooltip的類是el-tooltip__popper,可以直接寫CSS控制寬度

.el-tooltip__popper {
max-width: 400px;
line-height: 1.5;
font-size: 13px;
}

五:頁(yè)面有數(shù)據(jù),dom不刷新解決辦法

1.數(shù)組改變不刷新原因解析:

對(duì)于使原數(shù)組變化的方法,可以直接更新視圖。

對(duì)于原數(shù)組未變的方法,可以使用新數(shù)組替換原來(lái)的數(shù)組,以使視圖發(fā)生變化。

(1)原數(shù)組改變

push、 pop 、 unshift、shift、reverse、sort、splice

(2)原數(shù)組未變,生成新數(shù)組

slice、 concat 、filter

注意:以下不會(huì)觸發(fā)視圖的更新。

(1)通過(guò)索引直接設(shè)置項(xiàng)。

(2)修改數(shù)組長(zhǎng)度,app.books.length=1。

解決辦法:Vue.set(vm.someObject, 'b', 2)

2.表格或者頁(yè)面不刷新,增加v-if

附上 v-if和 v-show的區(qū)別:

使用了v-if的時(shí)候,如果值為false,那么頁(yè)面將不會(huì)有這個(gè)html標(biāo)簽生成。

v-show則是不管值為true還是false,html元素都會(huì)存在,只是CSS中的display顯示或隱藏

六:表單model的類型錯(cuò)誤,期望是對(duì)象,傳進(jìn)去是數(shù)組

image.jpeg

七:VUE中el-dialog點(diǎn)擊空白不消失

el-dialog中加入:close-on-click-modal="false"可以讓點(diǎn)擊空白不取消

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容