(react)antd组件中Table显示数据换行两种实现方式

// 这里一切从简，只写需要的
const columns = [
{
    title: '姓名',
    dataIndex: 'name',
    key: 'name',
    render: (_text, record) => {
        const list = record.sedList.map(item => item.value.join('<br/>'))
        return <span dangerouslySetInnerHTML={{_html: list}}></span>
    }
}]
<Table dataSource={dataSource} columns={columns} />;

在render中渲染，通过dangerouslySetInnerHTML={{_html: list}}直接渲染 HTML 字符串。这样可以正确显示换行。

实现结果如下：

第二种实现方式

{
   title: "备注" ,
   dataIndex: 'remark',
   checked: true,
   width: 200,
   render: (text, record) => {
    const list = ['1', '2', '3'] //直接写成这种数组了，方便理解，record拿到的数据转换成这种形式就可以了
     return (
         list.map(item => <><div>{item}</div></>)
     )
}

这种也可以实现换行