AntDesign vue学习笔记（六）Table 显示图片

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

通过摸索，实现方法以下：以显示一个图片，一个按钮为例(picurl是返回的json数据，内容为图片地址)。

一、设置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' } } ]

二、设置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>

备注：img那行也能够写为

<img style="width:100px;heigth:100px" slot="pic" slot-scope="text" :src=text />

图片显示效果

 

 三、操做按钮会显示两列，解决办法：去掉fixed: 'right'，或者加一个宽度，好比：fixed: 'right',width: 100便可。

 

网上网友评论：

Ant design Vue

【KPI之王】阿里的做品，阿里在江湖上一直是赫赫威名，

不过都是烂名声，大多数吐槽，只管生无论养。毕竟在在这种复杂大型的公司内部想作出点成绩上位 加上人员变动都是能够理解的

一、支持 vue,angluar,react

二、vue版本的表格列宽不能拖拽，必须设置宽度，否则错位。锁定列时候，内容太多，表头容易留白，多页签的模式下缓存存在....简单来讲，不能算是坑，

只能说他们设定的规则太多。须要大量的时间来看文档来适应。年初就有能提了列宽拖拽的问题。到如今也没更改。