AntDesignvue学习笔记(六)Table显⽰图⽚
AntDeign官⽹上没有table动态绑定显⽰图⽚的⽰例,baidu上搜索出来的⼤部分都是React语法,⽆法使⽤。
经过摸索,实现⽅法如下:以显⽰⼀个图⽚,⼀个按钮为例(picurl是返回的json数据,内容为图⽚地址)。
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  slot="pic" slot-scope="text, record" :src=record.picurl />
ant design
</a-table>
</a-layout-content>
备注:img那⾏也可以写为
<img slot="pic" slot-scope="text" :src=text />
图⽚显⽰效果
3、操作按钮会显⽰两列,解决办法:去掉fixed: 'right',或者加⼀个宽度,⽐如:fixed: 'right',width: 100即可。
⽹上⽹友评论:
Ant design Vue
【KPI之王】阿⾥的作品,阿⾥在江湖上⼀直是赫赫威名,
不过都是烂名声,⼤多数吐槽,只管⽣不管养。毕竟在在这种复杂⼤型的公司内部想做出点成绩上位加上⼈员变更都是可以理解的
1、⽀持 vue,angluar,react
2、vue版本的表格列宽不能拖拽,必须设置宽度,不然错位。锁定列时候,内容太多,表头容易留⽩,多页签的模式下缓存存在....简单来说,不能算是坑,
只能说他们设定的规则太多。需要⼤量的时间来看⽂档来适应。年初就有能提了列宽拖拽的问题。到现在也没更改。