个人技术分享

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)
      },
    },
]