复杂表头(多级表头 + 按钮)
如果表头是多级嵌套的,可以在最外层的 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>
效果
-
顶级表头显示 "批量操作" 按钮
-
子列分别显示 "编辑" 和 "删除" 按钮