复杂表头(多级表头 + 按钮)

如果表头是多级嵌套的,可以在最外层的 el-table-column 的 header 插槽里放按钮:

<el-table-column label="操作管理">
  <!-- 顶级表头放按钮 -->
  <template #header>
    <el-button 
      size="mini" 
      type="primary" 
      @click="handleBatchOperate"
    >批量操作</el-button>
  </template>

  <!-- 嵌套的子列 -->
  <el-table-column prop="edit" label="编辑" width="120">
    <template #default="scope">
      <el-button size="mini" @click="handleEdit(scope.row)">编辑</el-button>
    </template>
  </el-table-column>
  
  <el-table-column prop="delete" label="删除" width="120">
    <template #default="scope">
      <el-button size="mini" type="danger" @click="handleDelete(scope.row)">删除</el-button>
    </template>
  </el-table-column>
</el-table-column>

 

效果

  • 顶级表头显示 "批量操作" 按钮

  • 子列分别显示 "编辑" 和 "删除" 按钮

posted @ 2025-08-04 18:14  君子笑而不语  阅读(15)  评论(0)    收藏  举报