關(guān)于Element-ui中Table表格無法顯示的問題及解決
Element-ui中Table表格無法顯示
今天項目中需要用到表格，于是就采用了由餓了么前端團隊開發(fā)的Element-ui + Vue組合。
1、準備工作
使用命令：cnpm i element-ui -S 進行安裝Element-ui，安裝好了之后，進行如下配置：
這樣操作之后，就可以使用Element-ui插件了。
2、引用Element-ui官方文檔中的Table表格代碼
3、啟動端口，并在瀏覽器訪問
問題就出現(xiàn)在此步驟：在瀏覽器輸入url，回車后，瀏覽器空白，什么都不顯示。但是寫一個插值表達式(如下圖所示)，可以正常顯示，就是表格不能顯示。
最終找到問題的根源是element-ui依賴版本太高，換一個低版本的依賴即可。
解決方法：核心思想是把高本版依賴換成低版本依賴，具體操作步驟如下：
(1)在package.json文件中手動把element-ui版本改為一個較低版本，如2.9.2。
(2)把原來創(chuàng)建的Vue項目中的node_modules文件夾刪掉，重新執(zhí)行cnpm install，重新安裝。
(3)重新安裝好了執(zhí)行，再次從瀏覽器訪問，即可正常顯示。
注意：原來項目中的element-ui版本是2.13.0，上圖顯示的是我重新安裝的element-ui依賴版本號。
Element-ui表格不生效問題
今天在書寫代碼時遇到的問題，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í)行后效果：
問題解決?。?！
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
- element-ui復(fù)雜table表格動態(tài)新增列、動態(tài)調(diào)整行以及列順序詳解
- vue element-ui實現(xiàn)el-table表格多選以及回顯方式
- 關(guān)于Element-UI Table 表格指定列添加點擊事件
- vue element-ui里的table中表頭與表格出現(xiàn)錯位的解決
- element-ui中頁面縮放時table表格內(nèi)容錯位的解決
- 解決element-ui的table表格控件表頭與內(nèi)容列不對齊問題
- 關(guān)于Element-ui中el-table出現(xiàn)的表格錯位問題解決
- Element-UI中關(guān)于table表格的那些騷操作(小結(jié))
- Element-UI實現(xiàn)復(fù)雜table表格結(jié)構(gòu)的操作代碼
相關(guān)文章
Vue 3集成海康Web插件實現(xiàn)視頻監(jiān)控功能
本文詳細介紹了如何使用 Vue 3 框架集成?？礧eb插件實現(xiàn)視頻監(jiān)控功能,通過定義屬性、事件、變量,以及編寫初始化、播放視頻、處理節(jié)點點擊事件等方法,我們成功實現(xiàn)了視頻監(jiān)控系統(tǒng)的前端部分,感興趣的朋友一起看看吧2024-11-11
Vue?3?中?vue-router?的?router.resolve?()?API詳解
router.resolve()?就好比是一個精準的?“導(dǎo)航參謀”,當我們在?Vue?3?應(yīng)用里需要明確某個路由地址對應(yīng)的詳細信息時,它就能派上用場,本文給大家介紹Vue?3?中?vue-router?的?router.resolve?()?API,感興趣的朋友一起看看吧2025-04-04
這篇文章主要介紹了Vue組件設(shè)計-Sticky布局,本文通過示例代碼給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2023-05-05
這篇文章主要介紹了Vue自動構(gòu)建發(fā)布腳本的方法示例，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-07-07
構(gòu)建大型 Vue.js 項目的10條建議(小結(jié))
這篇文章主要介紹了構(gòu)建大型 Vue.js 項目的10條建議(小結(jié))，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-11-11
這篇文章主要介紹了vue組件之間通信,結(jié)合實例形式分析了vue父子組件、兄弟組件之間通信的原理、實現(xiàn)方法,并給出了一個類似點贊功能的總結(jié)實例,需要的朋友可以參考下2018-12-12
本文主要介紹了Vue顯示圖片的幾種方式小結(jié)，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-02-02
Vue nextTick延遲回調(diào)獲取更新后DOM機制詳解
這篇文章主要為大家介紹了Vue nextTick延遲回調(diào)獲取更新后DOM機制詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-08-08
Vue如何監(jiān)測數(shù)組類型數(shù)據(jù)發(fā)生改變的(推薦)
這篇文章主要介紹了Vue如何監(jiān)測數(shù)組類型數(shù)據(jù)發(fā)生改變的,本文通過實例代碼圖文詳解給大家講解的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-11-11
一個uniapp小程序的項目,我們需要實現(xiàn)一個非常實用的功能——類似于錨點定位的交互效果,即在首頁中有多個tab（分類標簽）,每個tab對應(yīng)著不同的模塊,當用戶點擊某個分類的tab時,需要流暢地滾動到對應(yīng)的內(nèi)容位置,提供更好的用戶體驗,2023-10-10