關(guān)于Element-ui中Table表格無法顯示的問題及解決
Element-ui中Table表格無法顯示
今天項(xiàng)目中需要用到表格，于是就采用了由餓了么前端團(tuán)隊(duì)開發(fā)的Element-ui + Vue組合。
1、準(zhǔn)備工作
使用命令：cnpm i element-ui -S 進(jìn)行安裝Element-ui，安裝好了之后，進(jìn)行如下配置：
這樣操作之后，就可以使用Element-ui插件了。
2、引用Element-ui官方文檔中的Table表格代碼
3、啟動端口，并在瀏覽器訪問
問題就出現(xiàn)在此步驟：在瀏覽器輸入url，回車后，瀏覽器空白，什么都不顯示。但是寫一個(gè)插值表達(dá)式(如下圖所示)，可以正常顯示，就是表格不能顯示。
最終找到問題的根源是element-ui依賴版本太高，換一個(gè)低版本的依賴即可。
解決方法：核心思想是把高本版依賴換成低版本依賴，具體操作步驟如下：
(1)在package.json文件中手動把element-ui版本改為一個(gè)較低版本，如2.9.2。
(2)把原來創(chuàng)建的Vue項(xiàng)目中的node_modules文件夾刪掉，重新執(zhí)行cnpm install，重新安裝。
(3)重新安裝好了執(zhí)行，再次從瀏覽器訪問，即可正常顯示。
注意：原來項(xiàng)目中的element-ui版本是2.13.0，上圖顯示的是我重新安裝的element-ui依賴版本號。
Element-ui表格不生效問題
今天在書寫代碼時(shí)遇到的問題，el-table在頁面中突然顯示為空白，檢查了甚至重復(fù)粘貼的幾次官網(wǎng)代碼都不行，后來在網(wǎng)上查閱了相關(guān)資料，解決了問題。
原因是
element-ui的依賴版本過高所導(dǎo)致的，將其該成低版本即可，親測可用。
找到對應(yīng)的package.json文件，在依賴（dependencies）一欄中找到element-ui，將版本改低（如2.9.2）即可。
"dependencies": {
"core-js": "^3.6.5",
"element-ui": "^2.9.2",
"vue": "^2.6.11"重新執(zhí)行后效果：
問題解決?。?！
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
- element-ui復(fù)雜table表格動態(tài)新增列、動態(tài)調(diào)整行以及列順序詳解
- vue element-ui實(shí)現(xiàn)el-table表格多選以及回顯方式
- 關(guān)于Element-UI Table 表格指定列添加點(diǎn)擊事件
- vue element-ui里的table中表頭與表格出現(xiàn)錯(cuò)位的解決
- element-ui中頁面縮放時(shí)table表格內(nèi)容錯(cuò)位的解決
- 解決element-ui的table表格控件表頭與內(nèi)容列不對齊問題
- 關(guān)于Element-ui中el-table出現(xiàn)的表格錯(cuò)位問題解決
- Element-UI中關(guān)于table表格的那些騷操作(小結(jié))
- Element-UI實(shí)現(xiàn)復(fù)雜table表格結(jié)構(gòu)的操作代碼
相關(guān)文章
本文主要介紹了vue3的內(nèi)置組件匯總,詳細(xì)的介紹了Fragment,Teleport,Suspense三個(gè)組件的使用,具有一定的參考價(jià)值,感興趣的可以了解一下2024-01-01
vue3實(shí)現(xiàn)數(shù)字滾動特效實(shí)例詳解
這篇文章主要為大家介紹了vue3實(shí)現(xiàn)數(shù)字滾動特效實(shí)例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-09-09
Vue+webpack項(xiàng)目基礎(chǔ)配置教程
這篇文章主要介紹了Vue+webpack項(xiàng)目基礎(chǔ)配置教程,需要的朋友可以參考下2018-02-02
如何實(shí)現(xiàn)雙向綁定mvvm的原理實(shí)現(xiàn)
這篇文章主要介紹了vue雙向數(shù)據(jù)綁定原理，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05
這篇文章主要介紹了vue對象的深度克隆方式，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-09-09
下面小編就為大家分享一篇axios post提交formdata的實(shí)例，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-03-03
防抖（Debounce）在前端開發(fā)中是一種常用的技術(shù),它的作用是限制某個(gè)操作在短時(shí)間內(nèi)的頻繁觸發(fā),下面我們就來看看如何一個(gè)Vue指令搞定函數(shù)防抖吧2024-02-02
這篇文章主要介紹了vue頁面切換過渡transition效果，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2018-10-10
mpvue微信小程序開發(fā)之實(shí)現(xiàn)一個(gè)彈幕評論
這篇文章主要介紹了mpvue小程序開發(fā)之 實(shí)現(xiàn)一個(gè)彈幕評論功能，本文通過實(shí)例講解的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-11-11
vue項(xiàng)目實(shí)戰(zhàn)之優(yōu)雅使用axios
axios是一個(gè)基于promise的HTTP庫,可以用在瀏覽器和?node.js?中,下面這篇文章主要給大家介紹了關(guān)于vue項(xiàng)目實(shí)戰(zhàn)之優(yōu)雅使用axios的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-02-02