如何实现动态渲染表头

如下图 表格有选中项后动态渲染表头

第二张图上面的操作，最好放在表上面吧，那有你这样的需求呢。

是使用的什么样的前端框架 antd 还是 eleui

配columns就好了.

建议将勾选的内容放到vue的data里,然后按钮对这些选中的消息进行处理。

提供一个思路，图2的表头写一个div，定位到表的表头位置，每当有选中项的时候出现，操作完成或者取消选中后消失。这样写可能会简单点

你的意思是选中几个之后表头变为删除、下架的按钮，就是第二张图的效果？不建议这样做，如果非得这样只能，动态改变columns也就是，checkbox有选中时，让其他columns的title都为空，就让第一个有值（使用slot实现）。

//伪代码
let columns=[
 {
  title:"日期",
  dataIndex:"date"
 },
 {
  title:"数量",
  dataIndex:"num"
 }
]

if(selectIndex.length>0){ //selectIndex是表格选中的项的id(唯一标识不是id也可以)
  columns.map((item,index)=>{
  if(index==0){
   item.title="<button>下载<button><button>删除<button>" //不一定这样写必须使用slot实现，这个只是个思路
  }
  item.title="";
})
}
//操作完再恢复回去

columns[0].title="日期";  //如果columns时从接口获取到，动态渲染也可以先备份一下 


//伪代码2

let columns=[ //如果从是从接口获取的，每一项不确定时什么先备份一下
 {
  title:"日期",
  dataIndex:"date"
 },
 {
  title:"数量",
  dataIndex:"num"
 }
]

let copyCoulmns=JSON.stringfly(columns); //不一定备份也可以是一个变量 let title=columns[0].title
if(selectIndex.length>0){ //selectIndex是表格选中的项的id(唯一标识不是id也可以)
  columns.map((item,index)=>{
  if(index==0){
   item.title="<button>下载<button><button>删除<button>" //不一定这样写必须使用slot实现，这个只是个思路
  }
  item.title="";
})
}
//操作完再恢复回去

columns[0].title=JSON.parse(copyColumns)[0];  //也可以是columns[0].title=title上面定义的变量

您好，我是有问必答小助手，您的问题已经有小伙伴解答了，您看下是否解决，可以追评进行沟通哦~

如果有您比较满意的答案 / 帮您提供解决思路的答案，可以点击【采纳】按钮，给回答的小伙伴一些鼓励哦～～

ps:问答VIP仅需29元，即可享受5次/月 有问必答服务，了解详情>>>https://vip.csdn.net/askvip?utm_source=1146287632

非常感谢您使用有问必答服务，为了后续更快速的帮您解决问题，现诚邀您参与有问必答体验反馈。您的建议将会运用到我们的产品优化中，希望能得到您的支持与协助！

速戳参与调研>>>https://t.csdnimg.cn/Kf0y