ant design vue中的Table组件一列显示多个参数

项目中，有时会遇到表格显示的字段较多，全部显示出来页面过长需要滚动查看， 用户体验不好，就需要将一些字段归类到一个单元格显示， 这时就需要一列显示多个参数了,直接上代码

 <a-table
    ref="table"
    size="middle"
    :scroll="{x:true}"
    bordered
    rowKey="id"
    :columns="columns"
    :dataSource="dataSource"
    :pagination="false"
    :loading="loading"    
    class="j-table-force-nowrap"
    >
    <!-- 订单信息-->
     <span slot="orderInfo" slot-scope="text,record">
        <template >
          <div>
            <p>{{record.createTime}}</p> 
            <p>{{record.id}}</p> 
          </div>         
        </template>  
      </span>
      <!-- 用户信息-->
      <span slot="userInfo" slot-scope="text,record">
       <template >
          <div>
            <p>{{record.userNickname}}</p> 
            <p>{{record.userPhone}}</p> 
          </div>         
        </template>  
     </span>
</a-table>

<script>
	 export default {
		 data () {
	     	 return {
	     	 	dataSource:[],
	     	 	columns:[
	     	 		{
			            title: '序号',
			            dataIndex: '',
			            key:'rowIndex',
			            width:60,
			            align:"center",
			            customRender:function (t,r,index) {
			              return parseInt(index)+1;
			            }
		          	},
		          	{
			            title:'订单',
			            align:"center",
			            dataIndex: 'orderInfo',
			            scopedSlots: { customRender: 'orderInfo' },
			         },
			         {
			            title:'购买人',
			            align:"center",
			            dataIndex: 'userInfo',
			            scopedSlots: { customRender: 'userInfo' },
			         },
	     	 	]
	     	 }
	      }
	 }
</script>

效果如下：