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

十八只兔2023-11-16 17:56

问题

在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=[]时则不能。