如何在 ant 的table中實(shí)現(xiàn)圖片的渲染操作
如何在 ant 的table中實(shí)現(xiàn)圖片的渲染
在使用react 的螞蟻金服的ui庫的時候，，平時用到的比較比較多的就是table組件，但是在ant官網(wǎng)上面，并沒有在后臺調(diào)取接口獲取數(shù)據(jù)后，，如何將后臺的http://lkjlkjlkj.jpg圖片渲染到每一行的例子。。只有一個render的方法。。。查閱了一些資料，作為一個不是很資深的前端來說，忙活了一上午，。實(shí)現(xiàn)了這個功能。。。記錄一下。。。
這里是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)建時間',
width: 150,
key : 'inTime'
}]
}
利用table 中 render的屬性，，，將LOGO在tableHeader中render return一個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ù)源,是一個數(shù)組,
3.loading 加載時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)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
Vue3 在經(jīng)過多個開發(fā)版本的迭代后,終于迎來了它的正式版本,下面這篇文章主要給大家介紹了關(guān)于如何使用vue3實(shí)現(xiàn)一個人喵交流小程序的相關(guān)資料,需要的朋友可以參考下2021-11-11
vue組件中節(jié)流函數(shù)的失效的原因和解決方法
這篇文章主要介紹了vue組件中節(jié)流函數(shù)的失效和解決方法，幫助大家更好的理解和學(xué)習(xí)vue框架，感興趣的朋友可以了解下2020-12-12
這篇文章主要為大家介紹了Vue之Axios異步通信，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2021-11-11
關(guān)于Vue?CLI3中啟動cli服務(wù)參數(shù)說明
這篇文章主要介紹了關(guān)于Vue?CLI3中啟動cli服務(wù)參數(shù)說明，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
今天小編就為大家分享一篇vue 監(jiān)聽屏幕高度的實(shí)例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
這篇文章主要介紹了vue的url請求圖片的問題及請求失敗解決方案,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-09-09
ant design vue中table表格滾動加載實(shí)現(xiàn)思路
在處理一寫數(shù)據(jù)量特別大的情況下,我們不能把后端的數(shù)據(jù)一次性全部拿到前端在table表格中展示,為了考慮性能優(yōu)化,使用了滾動加載表格數(shù)據(jù),這篇文章主要介紹了ant design vue中table表格滾動加載實(shí)現(xiàn)思路,需要的朋友可以參考下2024-07-07
vue3.2自定義彈窗組件結(jié)合函數(shù)式調(diào)用示例詳解
這篇文章主要為大家介紹了vue3.2自定義彈窗組件結(jié)合函數(shù)式調(diào)用示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-09-09
vue實(shí)現(xiàn)簡易的雙向數(shù)據(jù)綁定
這篇文章主要介紹了vue如何實(shí)現(xiàn)簡易的雙向數(shù)據(jù)綁定，幫助大家更好的理解和使用vue框架，感興趣的朋友可以了解下2020-12-12
本篇文章主要介紹了vue.js組件之間傳遞數(shù)據(jù)的方法，組件實(shí)例的作用域是相互獨(dú)立的，如何傳遞數(shù)據(jù)也成了組件的重要知識點(diǎn)之一，有興趣的可以了解一下2017-07-07