element-plus Table组件更新数据后表头消失的解决方法_element 多行表头固定列显示不出来头

项目场景：

使用element-plus组件库，通过tab栏的切换实现对下方的table组件数据进行更新

---

问题描述

使用tab栏切换表格Table组件表格内容的时候，Table组件更新数据后会导致table表格表头消失。

---

原因分析：

table里的数据展示代码中，有使用插槽对数据进行处理

     <el-table-column prop="read" label="阅读数">
        <template #default="scope">
          {{ scope.row.newsSend.read == null ? '暂无' : scope.row.newsSend.read }}
        </template>
      </el-table-column>
1
2
3
4
5

此处的处理的数据如果是对子元素的子元素进行处理，那么虽然会处理成功，但是会出现表头无法正常显示的现象。

 {{ scope.row.newsSend.read == null ? '暂无' : scope.row.newsSend.read }}
1

本人猜测element-plus的table组件在处理表头数据的时候无法正常获取到子元素的子元素的数据，故无法显示表头。

---

解决方案：

尽可能地避免表头的数据处理中出现scope.row.newsSend.read类型，不处理到子元素的子元素这种深度的数据就可以正常显示出表头。

      <el-table-column prop="read" label="阅读数">
        <template #default="scope">
          {{ scope.row.read == null ? '暂无' : scope.row.read }}
        </template>
      </el-table-column>
1
2
3
4
5