当前位置：首页 > article >正文

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

article 2024/11/16 9:39:49

问题描述：当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>

查看全文

http://www.kler.cn/a/292441.html