1.問(wèn)題：使用elementui 時(shí)間選擇報(bào)錯(cuò)
今天在使用elementui 時(shí)間選擇器時(shí)，一切正常，但發(fā)現(xiàn)瀏覽器一直報(bào)錯(cuò)，但奇了怪了，明明是從官網(wǎng)上復(fù)制的組件代碼，咋還會(huì)有問(wèn)題，錯(cuò)誤提示如下：
?2.分析：
Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated:"placement".
這個(gè)報(bào)錯(cuò)是提示我們避免直接更改 prop，因?yàn)槊慨?dāng)父組件重新呈現(xiàn)時(shí)，該值都會(huì)被覆蓋。相反，請(qǐng)使用基于 prop 值的數(shù)據(jù)或計(jì)算屬性。啥意思，不太明白，但當(dāng)我們找到源碼時(shí)，會(huì)發(fā)現(xiàn)其中的問(wèn)題所在：
在 node_modules中的elementui/packages?里可以找到datepicker的源碼vue，分析發(fā)現(xiàn)報(bào)錯(cuò)提示我們每次渲染加載頁(yè)面時(shí)，這個(gè)placement的值都會(huì)被重新覆蓋，需要我們使用源碼中要求的數(shù)據(jù)，感覺(jué)還是很拗口，但大概意思是讓我們賦值給placement。
3.解決：
之前遇到問(wèn)題時(shí)，雖然這個(gè)問(wèn)題暫時(shí)并不會(huì)影響頁(yè)面操作，但擔(dān)心會(huì)有其他隱患，關(guān)鍵瀏覽一直報(bào)錯(cuò)，強(qiáng)迫癥都犯了。百度后發(fā)現(xiàn)網(wǎng)上大部分都是說(shuō)版本問(wèn)題，2.15.9?開(kāi)始的，新版本中加了placement這個(gè)變量。舊版本不報(bào)錯(cuò)，可以退回舊版本就不會(huì)報(bào)錯(cuò)，具體退回的步驟可參考其他博客的內(nèi)容。
但感覺(jué)回退版本這種方法治標(biāo)不治本，測(cè)試后發(fā)現(xiàn)還是要提供placment的賦值數(shù)據(jù)，其實(shí)在于后面的PLACEMENT_MAP[this.align] || PLACEMENT_MAP.left這里，組件需要根據(jù)align或left屬性來(lái)賦值，查閱官方文檔后發(fā)現(xiàn)：
?picker有align屬性，經(jīng)過(guò)測(cè)試后發(fā)現(xiàn)果然和align有關(guān)，隨之問(wèn)題迎刃而解，只要在組件添加align屬性即可。如這里我添加align="center" ，element UI原生組件獲取添加的align屬性值來(lái)設(shè)置props中的placement變量
<el-form-item label="時(shí)間：">
<el-date-picker
v-model="value2"
type="date"
align="center"
placeholder="時(shí)間選擇">
</el-date-picker>
</el-form-item>
文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-519239.html
添加完成后就再進(jìn)行測(cè)試，瀏覽器再也沒(méi)有報(bào)錯(cuò)了，剛從坑底爬出來(lái)，希望對(duì)你有幫助。?文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-519239.html
到了這里，關(guān)于不更改版本 element ui el-date-picker 報(bào)錯(cuò) Prop being mutated: “placement“解決的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
