Vue3 + Antdv Table
使用Column 的 customRender
属性自定义列,且返回的数据是多个节点时,渲染失败问题(已解决)
说明:
-
Vue
无法像React
一样,能够直接返回节点数组,而只能返回单个节点。(仅限当前上下文中) -
为了渲染一个节点数组,您需要使用
h
函数(即createElement
)来创建一个容器元素,然后将组件数组作为子节点传递给它
解决方案
引入h
函数
import { h } from 'vue';
使用
const columns = [
{
title: '状态',
dataIndex: 'status',
key: 'status',
ellipsis: false,
customRender: ({record,text}) => {
let statusMsgList = text.split(",")
let tags = statusMsgList.map((currentStatusMsg,index) => {
return (
<Tag
style={{cursor:'pointer',borderRadius:'5px'}}
color='#29a2ff'
>
{currentStatusMsg}
</Tag>
)
})
//使用位置
return h('div',{},tags)
},
},
]