问题描述:当titleList的值进行筛选改变的时候#header里面的的数据并没有实时响应,如下面的代码
html
<el-table :data="newData" border style="width: 100%">
<el-table-column
v-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实现数据绑定
html
<el-table :data="newData" border style="width: 100%">
<el-table-column
v-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>