最近在使用vue ant design 的时候,在处理接口返回的列表数据的时候老是出现各种问题,比如接口里返回的是时间戳,怎么在表格里展示成日期格式;还有接口返回的是bool类型,怎么展示成对应的文字描述等,话不多说,直接上代码。
const columnsList = [
[
{
title: "名称",
align: "center",
width: "200px",
dataIndex: "name",
scopedSlots: { customRender: "name" },
},
{
title: "是否长期",
dataIndex: "effectiveType",
align: "center",
scopedSlots: { customRender: "effectiveType" },
customRender: (text, row, index) => {
return text?"是": "否"
}
},
{
title: "有效开始时间",
align: "center",
dataIndex: "effectiveBegin",
scopedSlots: { customRender: "effectiveBegin" },
customRender: (text, row, index) => {
return moment(text).format("YYYY-MM-DD HH:mm")
}
},
{
title: "状态",
align: "center",
dataIndex: "enable",
scopedSlots: { customRender: "enable" },
customRender: (text, row, index) => {
return text?"启用": "禁用"
}
},
{
title: "操作",
dataIndex: "handle",
width: "300px",
scopedSlots: { customRender: "view" },
align: "center"
}
]
只需要在表格定义的columns里通过customRender函数处理即可完成。其中customRender中用this访问不到data中定义的数组。