AntDesign vue學習筆記(六)Table 顯示圖片

AntDeign官網上沒有table動態綁定顯示圖片的示例,baidu上搜索出來的大部分都是React語法,沒法使用。javascript

通過摸索,實現方法以下:以顯示一個圖片,一個按鈕爲例(picurl是返回的json數據,內容爲圖片地址)。vue


一、設置column,scopedslotsjava

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 slotreact

<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那行也能夠寫爲json

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

圖片顯示效果緩存

 

 三、操做按鈕會顯示兩列,解決辦法:去掉fixed: 'right',或者加一個寬度,好比:fixed: 'right',width: 100便可。curl

 

網上網友評論:lua

Ant design Vueurl

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

不過都是爛名聲,大多數吐槽,只管生無論養。畢竟在在這種複雜大型的公司內部想作出點成績上位 加上人員變動都是能夠理解的

一、支持 vue,angluar,react

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

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

相關文章
相關標籤/搜索