本文主要是介绍el-table使用#header自定义表头后脱离响应式问题处理，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
问题描述：当titleList的值进行筛选改变的时候#header里面的的数据并没有实时响应，如下面的代码
<el-table :data="newData" border style="width: 100%"><el-table-columnv-for="(day, index) in titleList" :key="day.date"width="600"align="center"><!-- 自定义表头，添加固定内容 --><template #header><div><div class="scale-100 flex"><div class="bor">旷</div><div class="bor">加</div></div><div class="scale-100 flex"><div class="bor">{{ day.absent }}</div><div class="bor">{{ day.actualOvertimeDay }}</div></div></div></template><!-- 的内容 --><template #default="scope"><div></div></template></el-table-column></el-table>解决办法：#header里的day.absent无法实时响应最新数据，但是titleList数据已经进行改变，所以day.absent可以替换为newDataTitle[index].absent实现数据绑定
<el-table :data="newData" border style="width: 100%"><el-table-columnv-for="(day, index) in titleList" :key="day.date"width="600"align="center"><!-- 自定义表头，添加固定内容 --><template #header><div><div class="scale-100 flex"><div class="bor">旷</div><div class="bor">加</div></div><div class="scale-100 flex"><div class="bor">{{ newDataTitle[index].absent }}</div><div class="bor">{{ newDataTitle[index].actualOvertimeDay }}</div></div></div></template><!-- 的内容 --><template #default="scope"><div></div></template></el-table-column></el-table>这篇关于el-table使用#header自定义表头后脱离响应式问题处理的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
