AntDesign vue學習筆記（六）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  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 />

圖片顯示效果

 

 3、操作按鈕會顯示兩列，解決辦法：去掉fixed: 'right'，或者加一個寬度，比如：fixed: 'right',width: 100即可。

 

網上網友評論：

Ant design Vue

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

不過都是爛名聲，大多數吐槽，只管生不管養。畢竟在在這種復雜大型的公司內部想做出點成績上位 加上人員變更都是可以理解的

1、支持 vue,angluar,react

2、vue版本的表格列寬不能拖拽，必須設置寬度，不然錯位。鎖定列時候，內容太多，表頭容易留白，多頁簽的模式下緩存存在....簡單來說，不能算是坑，

只能說他們設定的規則太多。需要大量的時間來看文檔來適應。年初就有能提了列寬拖拽的問題。到現在也沒更改。