AntDesign vue学习笔记（六）Table Render Pic

时间：2019-07-02 12:18:46 收藏：0 阅读：2100

AntDeign官网上没有table动态绑定显示图片的示例，baidu上搜索出来的大部分都是React语法，

下面以显示一个图片，一个按钮为例
1、设置column，scopedslots

const columns = [
  { title: ‘图片‘,width: 120,dataIndex: ‘picurl‘,fixed: ‘left‘, key: ‘pic‘,scopedSlots: { customRender: ‘pic‘ }},
  { title: ‘操作‘, key: ‘operation‘, fixed: ‘right‘, width: 100, scopedSlots: { customRender: ‘action‘ } }
]

2、设置table slot

<a-layout-content>
  <a-table :columns="columns" :dataSource="data" :rowSelection="rowSelection">
    <a slot="action" href="javascript:;">查看</a>
    <img  style="width:100px;heigth:100px" slot="pic" slot-scope="text, record" :src=record.picurl />
  </a-table>
</a-layout-content>

图片显示效果

技术分享图片

原文：https://www.cnblogs.com/zhaogaojian/p/11119762.html