Vue3: el-table表格数据不显示

问题

  • 在Vue3中使用ElementPlus的el-table来展示数据,但是数据一直没有显示出来

分析及解决

1、el-table是否正确引入
  • 首先,数据已确定正确绑定,elementplus也已正确引入,一开始以为是elementplus版本的问题,还重新安装了,但是数据依旧不显示
  • 表格的代码大致如下:
javascript 复制代码
<!-- 表格 -->
<el-table
  :data="dataALL"
  :header-cell-style="{ 'text-align': 'center' }"
  :cell-style="{ 'text-align': 'center' }"
  style="width: 100%"
>
  <el-table-column prop="index" label="No." width="55" />
  <el-table-column prop="name" label="项目名称" />
  <el-table-column prop="key1" label="指标1" />
  <el-table-column prop="key2" label="指标2" />
</el-table>
2、数据内容是否为空
  • 其次,在控制台输出了绑定在表格上的数据,数据内容不为空,因此,排除了数据为空导致表格内容不显示的情况
3、数据类型(响应式数据)

排除了前面2种情况之后,回到最开始数据定义的地方

  • 原先的数据定义如下:
javascript 复制代码
var  dataAll=[]
  • 将数据类型改为:
javascript 复制代码
const dataAll=ref([])

重新运行项目后,表格数据能够正常显示了

4、分析:
  • 一开始使用var dataAll=[]时,创建了一个名为dataAll的变量,它是一个空数组。然而,由于这个变量不是响应式数据,Vue.js无法检测到它的变化并更新视图。因此,即使后来改变了dataAll的值,el-table的显示也不会改变。

  • 而当使用const dataAll=ref([])时,创建了一个响应式的数据引用。ref这个数据引用可以用来包装任何类型的响应式数据,包括数组。因此,当改变dataAll的值时,由于它是响应式的,Vue.js可以检测到这个变化并更新视图。

  • 这就是为什么当使用const dataAll=ref([])时,el-table可以正确地显示数据的变化,而使用var dataAll=[]时则不能。

相关推荐
鱼樱前端1 小时前
今天介绍下最新更新的Vite7
前端·vue.js
独立开阀者_FwtCoder2 小时前
【Augment】 Augment技巧之 Rewrite Prompt(重写提示) 有神奇的魔法
前端·javascript·github
我想说一句2 小时前
事件机制与委托:从冒泡捕获到高效编程的奇妙之旅
前端·javascript
汤姆Tom2 小时前
JavaScript reduce()函数详解
javascript
小飞悟2 小时前
你以为 React 的事件很简单?错了,它暗藏玄机!
前端·javascript·面试
中微子2 小时前
JavaScript 事件机制:捕获、冒泡与事件委托详解
前端·javascript
蓝翔认证10级掘手3 小时前
🤯 家人们谁懂啊!我的摸鱼脚本它...它成精了!🚀
javascript
炒毛豆3 小时前
vue3.4中的v-model的用法~
前端·vue.js
前端康师傅3 小时前
JavaScript 中你不知道的按位运算
前端·javascript
tianchang3 小时前
策略模式(Strategy Pattern)深入解析与实战应用
前端·javascript·代码规范