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

问题

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

分析及解决

1、el-table是否正确引入
  • 首先,数据已确定正确绑定,elementplus也已正确引入,一开始以为是elementplus版本的问题,还重新安装了,但是数据依旧不显示
  • 表格的代码大致如下:
<!-- 表格 -->
<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种情况之后,回到最开始数据定义的地方

  • 原先的数据定义如下:
var  dataAll=[]
  • 将数据类型改为:
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=[]时则不能。

你可能感兴趣的:(Javascript,vue,element,ui,vue.js,javascript,vue3,ElementPlus)