關(guān)于Element-ui中Table表格無法顯示的問題及解決

更新時(shí)間：2022年08月01日 10:17:11 作者：Apple-yeran

這篇文章主要介紹了關(guān)于Element-ui中Table表格無法顯示的問題及解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

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、啟動(dòng)端口，并在瀏覽器訪問

問題就出現(xiàn)在此步驟：在瀏覽器輸入url，回車后，瀏覽器空白，什么都不顯示。但是寫一個(gè)插值表達(dá)式(如下圖所示)，可以正常顯示，就是表格不能顯示。

最終找到問題的根源是element-ui依賴版本太高，換一個(gè)低版本的依賴即可。

解決方法：核心思想是把高本版依賴換成低版本依賴，具體操作步驟如下：

(1)在package.json文件中手動(dòng)把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依賴版本號(hào)。

Element-ui表格不生效問題

今天在書寫代碼時(shí)遇到的問題，el-table在頁(yè)面中突然顯示為空白，檢查了甚至重復(fù)粘貼的幾次官網(wǎng)代碼都不行，后來在網(wǎng)上查閱了相關(guān)資料，解決了問題。

原因是

element-ui的依賴版本過高所導(dǎo)致的，將其該成低版本即可，親測(cè)可用。

找到對(duì)應(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è)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

Vue 3集成?？礧eb插件實(shí)現(xiàn)視頻監(jiān)控功能
本文詳細(xì)介紹了如何使用 Vue 3 框架集成海康Web插件實(shí)現(xiàn)視頻監(jiān)控功能,通過定義屬性、事件、變量,以及編寫初始化、播放視頻、處理節(jié)點(diǎn)點(diǎn)擊事件等方法,我們成功實(shí)現(xiàn)了視頻監(jiān)控系統(tǒng)的前端部分,感興趣的朋友一起看看吧
2024-11-11
Vue?3?中?vue-router?的?router.resolve?()?API詳解
router.resolve()?就好比是一個(gè)精準(zhǔn)的?“導(dǎo)航參謀”,當(dāng)我們?cè)?Vue?3?應(yīng)用里需要明確某個(gè)路由地址對(duì)應(yīng)的詳細(xì)信息時(shí),它就能派上用場(chǎng),本文給大家介紹Vue?3?中?vue-router?的?router.resolve?()?API,感興趣的朋友一起看看吧
2025-04-04
Vue組件設(shè)計(jì)-Sticky布局效果示例
這篇文章主要介紹了Vue組件設(shè)計(jì)-Sticky布局,本文通過示例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2023-05-05
Vue自動(dòng)構(gòu)建發(fā)布腳本的方法示例
這篇文章主要介紹了Vue自動(dòng)構(gòu)建發(fā)布腳本的方法示例，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2020-07-07
構(gòu)建大型 Vue.js 項(xiàng)目的10條建議(小結(jié))
這篇文章主要介紹了構(gòu)建大型 Vue.js 項(xiàng)目的10條建議(小結(jié))，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2019-11-11
vue組件之間通信實(shí)例總結(jié)(點(diǎn)贊功能)
這篇文章主要介紹了vue組件之間通信,結(jié)合實(shí)例形式分析了vue父子組件、兄弟組件之間通信的原理、實(shí)現(xiàn)方法,并給出了一個(gè)類似點(diǎn)贊功能的總結(jié)實(shí)例,需要的朋友可以參考下
2018-12-12
Vue顯示圖片的幾種方式小結(jié)
本文主要介紹了Vue顯示圖片的幾種方式小結(jié)，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2023-02-02
Vue nextTick延遲回調(diào)獲取更新后DOM機(jī)制詳解
這篇文章主要為大家介紹了Vue nextTick延遲回調(diào)獲取更新后DOM機(jī)制詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2022-08-08
Vue如何監(jiān)測(cè)數(shù)組類型數(shù)據(jù)發(fā)生改變的(推薦)
這篇文章主要介紹了Vue如何監(jiān)測(cè)數(shù)組類型數(shù)據(jù)發(fā)生改變的,本文通過實(shí)例代碼圖文詳解給大家講解的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2022-11-11
UniApp中實(shí)現(xiàn)類似錨點(diǎn)定位滾動(dòng)效果
一個(gè)uniapp小程序的項(xiàng)目,我們需要實(shí)現(xiàn)一個(gè)非常實(shí)用的功能——類似于錨點(diǎn)定位的交互效果,即在首頁(yè)中有多個(gè)tab（分類標(biāo)簽）,每個(gè)tab對(duì)應(yīng)著不同的模塊,當(dāng)用戶點(diǎn)擊某個(gè)分類的tab時(shí),需要流暢地滾動(dòng)到對(duì)應(yīng)的內(nèi)容位置,提供更好的用戶體驗(yàn),
2023-10-10