ant desgin vue中table一列渲染多个参数

如图想显示如下效果
在这里插入图片描述
在这里插入图片描述
代码如下:

<template>
  <div>
    <a-table :columns="columns1" :data-source="datalist1" :pagination="false" :showHeader='false'>
        <span slot="img" slot-scope="img">
            <img :src="img" alt="" :style="{width: '45px'}">
        </span>
        <span slot="name" slot-scope="text,string">
            <p>{{string.name}}</p>
            <p>{{string.college}}</p>
        </span>
    </a-table>
  </div>
</template>

<script>
const columns1 = [  
  {
    title: '头像',
    dataIndex: 'img',
    key: 'img',
    slots: {
      title: 'customTitle'
    },
    scopedSlots: {
      customRender: 'img'
    }
  },
   {
    title: '姓名',
    dataIndex: 'name',
    key: 'name',
    slots: {
      title: 'customTitle'
    },
    scopedSlots: {
      customRender: 'name'
    }
  },
  {
    title: '次数',
    dataIndex: 'number',
    key: 'number',
  },
]


export default {
  data() {
    return {
      // 安全周报
      datalist1: [
        {
          img: 'https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png',
          name: '张三',
          college: '经济管理学院',
          number: '7/7次'
        },
      ],
      columns1,
    };
  },
};
</script>

我的方法是不必定义多余的columns方法,直接在插槽中利用slot-scope的第二个参数来获取当前遍历数组对应项从而渲染数组,具体的渲染方法看个人

评论将由博主筛选后显示,对所有人可见 | 还能输入1000个字符 “速评一下”
©️2020 CSDN 皮肤主题: 深蓝海洋 设计师:CSDN官方博客 返回首页