elementui的table不显示
时间: 2023-10-16 22:09:16 浏览: 50
如果ElementUI的table无法正常显示,可能是以下几个原因:
1. 没有正确引入ElementUI的样式文件
需要在页面中引入ElementUI的样式文件,可以在HTML文件中添加以下代码:
```
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
```
2. 没有正确引入ElementUI的JS文件
需要在页面中引入ElementUI的JS文件,可以在HTML文件中添加以下代码:
```
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
```
3. 没有正确使用Table组件
需要在Vue组件中正确使用Table组件,可以参考以下代码:
```
<template>
<div>
<el-table :data="tableData" style="width: 100%">
<el-table-column prop="date" label="日期"></el-table-column>
<el-table-column prop="name" label="姓名"></el-table-column>
<el-table-column prop="address" label="地址"></el-table-column>
</el-table>
</div>
</template>
<script>
export default {
data() {
return {
tableData: [
{ date: '2021-01-01', name: '张三', address: '北京市' },
{ date: '2021-01-02', name: '李四', address: '上海市' },
{ date: '2021-01-03', name: '王五', address: '广州市' },
{ date: '2021-01-04', name: '赵六', address: '深圳市' }
]
}
}
}
</script>
```
如果以上方法无法解决问题,可以查看浏览器控制台是否有报错信息,进一步排查问题。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)