el-table使用#header自定义表头后脱离响应式问题处理

theOtherSky

于 2024-09-06 09:27:11 发布

阅读量342

点赞数 1

分类专栏： element vue 文章标签： vue.js elementui javascript

本文链接：https://blog.csdn.net/qq_35181466/article/details/141950625

版权

vue 同时被 2 个专栏收录

17 篇文章 0 订阅

订阅专栏

element

5 篇文章 0 订阅

订阅专栏

问题描述：当titleList的值进行筛选改变的时候#header里面的的数据并没有实时响应，如下面的代码

<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实现数据绑定

<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>