element的el-table表格自定义表头，slot="header"内，数据不更新的问题

最新推荐文章于 2025-05-22 14:06:04 发布

瞎转悠达

最新推荐文章于 2025-05-22 14:06:04 发布

阅读量4.4k

点赞数 5

CC 4.0 BY-SA版权

本文链接：https://blog.csdn.net/qq_35859392/article/details/107503367

在使用Element UI的el-table组件并尝试通过slot='header'实现自定义表头时，遇到表头内el-select选择状态无法更新的困扰。解决方法是将slot属性改为#header。参考链接：https://blog.csdn.net/weixin_43899935/article/details/105137626

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<template>
  <div class="bidsInfo">
    <el-table ref="singleTable" :data="noticeData" highlight-current-row style="width: 100%;margin-top:40px;">
      <el-table-column type="index" label="序号" width="50">
      </el-table-column>
      <el-table-column property="title" label="标题">
        <template slot-scope="scope">
          <span style="cursor: pointer;">{
   
   {scope.row.title}}</span>
        </template>
      </el-table-column>
      <el-table-column property="hytype" width="160" align="center">
        <template #header>
          类型
          <el-select v-model="typeVal" placeholder="请选择">
            <el-option v-for="item in typeOptions" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>