项目场景:
使用Ant Design of Vue中的table组件,现在有需求显示一个建议时段,包含开始时间和结束时间,如下图:
问题描述:
百度发现博文都解决不了问题,参考了类似如下博文:博客
基本写法是:
原因分析:
根据文档发现,vue使用table自定义渲染应该使用customRender而不是render。
const columns = [
{
title: "序号",
dataIndex: "serialNumberE",
scopedSlots: { customRender: "serialNumber" },
width: 60,
align: "center",
},
{
title: "建议时段",
align: "center",
width: 250,
customRender: (text, record) =>
record.beginDate +'~' + record.endDate,
ellipsis:true,
}
]
这样就可以在同一列显示不同的参数。