antd table columns render

在开发中，我们不可避免会使用到antd table 组件，当列的显示内容与默认的不同的时候就需要使用 col 的render属性来自定义列的显示内容了，如下：

{
    key: 'name',
    dataIndex: 'name',
    title:  '名称'，
    sortType:'string' //此列为公司自己封装的table组件的功能
    align:'center',
    //如果没有特殊显示需求，那么以上这些属性就ok啦
   //案例1:根据值来渲染一个星星,Star 是自定义的一个组件，根据传递的value 来渲染不同数量的星星
   render:(value)=> <Star value={value} />
   //案例2: 使表格的col的内容换行显示，（在col 的内容是一个数组的时候）
   render:(value)=>{
    let ele = '';
    if(value){
    ele = value && value.split(',').map((item,index)=> 
       <div title={item}
           className={index < value.split(',').length ? styles.自定义样式 ： ’‘}
       > //鼠标悬停的title，样式可以控制内容的样式，例如加下边框形成换行，修改对其方式等
            {item || '-'}
       </div>
    )
   }
}

虽然以上的内容很简单，但要做到灵活运用还是需要积累一些案例才能达到熟能生巧的地步。。。。