Vue使用餓了麼el-table標籤方法及報錯解決

學習Vue

最近在學習vue,使用到了餓了麼標籤中的表格。

使用方式

一般情況下,再vue中鍵入如下圖所示代碼使用即可。
在這裏插入圖片描述
代碼鏈接:https://element.eleme.cn/#/zh-CN/component/table

  • 結果
    但是頁面只有一個官方圖標,其他什麼也不顯示,更沒有想要的表格:
    在這裏插入圖片描述

解決過程

檢查元素,點開控制檯,發現頁面報錯。

[Vue warn]: Unknown custom element: <el-table> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

在這裏插入圖片描述

  • 發現是el-table標籤的問題。

錯誤原因

沒有在main.js文件中註冊ElementUI組件。

解決方法

找到main.js,加入如下代碼:
註冊組件:

import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

使用該組件:

Vue.use(ElementUI)

如果沒有該組件,需要安裝。
切換到這個項目的目錄下安裝組件。
淘寶鏡像:

cnpm i element-ui -S  

或一般命令:

npm i element-ui -S

結果

此時再運行界面,就沒有報錯,可以正常顯示錶格了。

運行界面

在這裏插入圖片描述

發佈了145 篇原創文章 · 獲贊 172 · 訪問量 3萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章