使用antd design vue遇到的一些问题(1)

如何在表格中插入图片

<a-table :columns="columns" :dataSource="data" :pagination="pagination">
    <template slot="image" slot-scope="image">
          <img :src="image" style="width:50px;height:50px" />
        </template>
         <span slot="action" >
          <a @click="handleEdit()">编辑</a>
          <a-divider type="vertical" />
         <a @click="handledel()">删除</a>
         </span>
    <a-pagination v-model="current" :total="50" />
  </a-table>
 data () {
    const columns = [
  { title: '讲师头像', dataIndex: 'image', key: '1', width: 100 ,scopedSlots: { customRender: 'image' },align:'center'},
  { title: '讲师姓名', dataIndex: 'age', key: '2', width: 100,align:'center'},
  { title: '讲师简介', dataIndex: 'a', key: '3', width: 200 ,align:'center'},
  { title: '操作',dataIndex: 'action',width: 150,scopedSlots: { customRender: 'action' },align:'center'}
];

const data = [];
for (let i = 0; i < 100; i++) {
  data.push({
    key: i,
    name: `Edrward ${i}`,
    age: 32,
    address: `London Park no. ${i}`,
    image:'https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png',
    a:1
  });
}
    return {
      data,
      columns,
     pagination:{pageSize:15}
    }
  },

在columns里添加scopedSlots属性,里面的customRender对应slot的值,上面的代码中slot-scope对应的是data里的某个值,如果有两个参数,则第二个表示当前的整个数据

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值