如何在 ant 的table中實(shí)現(xiàn)圖片的渲染操作
如何在 ant 的table中實(shí)現(xiàn)圖片的渲染

在使用react 的螞蟻金服的ui庫的時(shí)候,,平時(shí)用到的比較比較多的就是table組件,但是在ant官網(wǎng)上面,并沒有在后臺調(diào)取接口獲取數(shù)據(jù)后,,如何將后臺的http://lkjlkjlkj.jpg圖片渲染到每一行的例子。。只有一個(gè)render的方法。。。查閱了一些資料,作為一個(gè)不是很資深的前端來說,忙活了一上午,。實(shí)現(xiàn)了這個(gè)功能。。。記錄一下。。。
這里是table的使用
<Table
selectHandle={false}
onCtrlClick={ this.tableAction }
header={this.tableHeader()}
pagination={ true }
scroll = {{y:450}}
pageSize={10}
getpage={this.getpage}
currentPage={this.state.currentPage}
data={this.state.dataSource}
checkChang={this.checkChang} />
table中theader的渲染
tableHeader = () => {
return [{
dataIndex: '',
title: 'Logo',
width: 150,
key : 'image',
render:(record) => {
return <img src={record.image} alt="" style={{width:'5 0px',height:'50px',borderRadius:'50%'}}/>
}
},{
dataIndex: 'name',
title: '名稱',
width: 150,
key : 'name'
},{
dataIndex: 'label',
title: '標(biāo)簽',
width: 150,
key : 'label'
},{
dataIndex: 'collectCount',
title: '關(guān)注數(shù)',
width: 150,
key : 'collectCount'
}, {
dataIndex: 'topicCount',
title: '帖子數(shù)',
width: 150,
key : 'topicCount'
},{
dataIndex: 'inTime',
title: '創(chuàng)建時(shí)間',
width: 150,
key : 'inTime'
}]
}

利用table 中 render的屬性,,,將LOGO在tableHeader中render return一個(gè)img 標(biāo)簽,并將src={ record.image }
圖片就正確的渲染到你的table中了。。拿走 不謝~~~
補(bǔ)充知識:ant design table 數(shù)據(jù)渲染,插槽使用
我就廢話不都說了,大家還是直接看代碼吧~
<a-table :columns="columns" :dataSource="dataList" :loading="loading" :pagination="false" :rowKey="(record,index) => index">
<template slot="duty" slot-scope="text, record, index">
<span v-if="text == 'general'">普通員工</span>
<span v-if="text == 'expert'">專家</span>
<span v-if="text == 'admin'">管理員</span>
</template>
<template slot="status" slot-scope="text, record, index">
<span v-if="text == '1'">正常</span>
<span v-if="text == '0'">失效</span>
</template>
<template slot="action" slot-scope="text, record, index">
<a-button type="primary" size="small" @click="editUser(record)">編輯</a-button>
</template>
</a-table>
// script 部分
data(){
return {
columns:[
{
title: '用戶賬號',
dataIndex: 'username',
},
{
title: '姓名',
dataIndex: 'name',
},
{
title: '角色',
dataIndex: 'duty',
scopedSlots: {customRender: 'duty'}
},
{
title: '狀態(tài)',
dataIndex: 'status',
scopedSlots: {customRender: 'status'}
},
{
title: '操作',
dataIndex: 'action',
scopedSlots: {customRender: 'action'},
}],
dataList: [],
loading: false,
}
},
created(){
this.getList()
},
methods: {
getList(){
this.loading = true;
this.$http.get('/getUsers.do').then(res => {
if(res){
this.dataList = res || []
}
this.loading = false;
}).catch(err => {
console.log(err)
})
},
editUser(record){
this.$refs.addModal.showModal(record)
},
}
1.columns 定義table 表頭,以及和 dataList 的字段對應(yīng),
2. dataSource 為數(shù)據(jù)源,是一個(gè)數(shù)組,
3.loading 加載時(shí)loading,數(shù)據(jù)請求前設(shè)置 true,請求完成后設(shè)置 false,
4.插槽的使用
很多情況下,后端返回的數(shù)據(jù)是 數(shù)字,前端需要展示文字,這事使用插槽就會非常方便
1.首先,在 columns 中需要的部分添加 scopedSlots: {customRender: ‘status'}
2.table 中添加標(biāo)簽
<template slot="status" slot-scope="text, record, index"> <span v-if="text == '1'">正常</span> <span v-if="text == '0'">失效</span> </template>
customRender 的值和slot 的值相對應(yīng),slot-scope 中 text就是status的值(text可以自定義,key,item都可以), record 代表text所在的對象,可以通過 record 拿到該行的其他值. 比如
editUser(record){
this.$refs.addModal.showModal(record)
},
把record作為參數(shù)傳遞,編輯改用戶信息.
以上這篇如何在 ant 的table中實(shí)現(xiàn)圖片的渲染操作就是小編分享給大家的全部內(nèi)容了,希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
相關(guān)文章
vue自定義權(quán)限指令的實(shí)現(xiàn)
本文主要介紹了vue自定義權(quán)限指令的實(shí)現(xiàn)2024-05-05
Vue3實(shí)現(xiàn)通過axios來讀取本地json文件
這篇文章主要介紹了Vue3實(shí)現(xiàn)通過axios來讀取本地json文件方式,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-07-07
基于vue-cli配置lib-flexible + rem實(shí)現(xiàn)移動端自適應(yīng)
這篇文章主要介紹了基于vue-cli配置lib-flexible + rem實(shí)現(xiàn)移動端自適應(yīng),需要的朋友可以參考下2017-12-12
Vue通過配置WebSocket并實(shí)現(xiàn)群聊功能
本篇文章將與各位開發(fā)者分享下 vue-native-websocket 庫的使用以及配置,通過實(shí)例代碼給大家分享Vue通過配置WebSocket并實(shí)現(xiàn)群聊功能,需要的朋友可以參考下2019-12-12
如何解決Vue請求接口出現(xiàn)跨域問題Access-Control-Allow-Origin
這篇文章主要介紹了如何解決Vue請求接口出現(xiàn)跨域問題Access-Control-Allow-Origin,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
vue實(shí)現(xiàn)盒子內(nèi)拖動方塊移動的示例代碼
這篇文章主要給大家介紹了如何通過vue實(shí)現(xiàn)盒子內(nèi)拖動方塊移動,文章通過代碼示例講解的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴可以參考閱讀本文2023-08-08
ArcGis?API?for?js在vue.js中的使用示例詳解
這篇文章主要為大家介紹了ArcGis?API?for?js在vue.js中的使用示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-08-08
vue 1.0 結(jié)合animate.css定義動畫效果
本文分步驟給大家介紹了Vue 1.0自定義動畫效果,vue1.0代碼結(jié)合animate.css定義動畫,頁面一定要引入animate.cdd,具體實(shí)例代碼大家參考下本文2018-07-07
vue基于input實(shí)現(xiàn)密碼的顯示與隱藏功能
這篇文章主要介紹了vue基于input實(shí)現(xiàn)密碼的顯示與隱藏功能,文末給大家介紹了vue?如何實(shí)現(xiàn)切換密碼的顯示與隱藏效果,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),需要的朋友可以參考下2022-01-01

