如何在 ant 的table中实现图片的渲染操作
(编辑：jimmy 日期: 2024/11/14 浏览：2)
如何在 ant 的table中实现图片的渲染
在使用react 的蚂蚁金服的ui库的时候，，平时用到的比较比较多的就是table组件，但是在ant官网上面，并没有在后台调取接口获取数据后，，如何将后台的http://lkjlkjlkj.jpg图片渲染到每一行的例子。。只有一个render的方法。。。查阅了一些资料，作为一个不是很资深的前端来说，忙活了一上午，。实现了这个功能。。。记录一下。。。
这里是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: '标签',
width: 150,
key : 'label'
},{
dataIndex: 'collectCount',
title: '关注数',
width: 150,
key : 'collectCount'
}, {
dataIndex: 'topicCount',
title: '帖子数',
width: 150,
key : 'topicCount'
},{
dataIndex: 'inTime',
title: '创建时间',
width: 150,
key : 'inTime'
}]
}
利用table 中 render的属性，，，将LOGO在tableHeader中render return一个img 标签，并将src={ record.image }
图片就正确的渲染到你的table中了。。拿走 不谢～～～
补充知识：ant design table 数据渲染,插槽使用
我就废话不都说了，大家还是直接看代码吧~
<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: '状态',
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 的字段对应,
2. dataSource 为数据源,是一个数组,
3.loading 加载时loading,数据请求前设置 true,请求完成后设置 false,
4.插槽的使用
很多情况下，后端返回的数据是 数字，前端需要展示文字，这事使用插槽就会非常方便
1.首先,在 columns 中需要的部分添加 scopedSlots: {customRender: ‘status'}
2.table 中添加标签
<template slot="status" slot-scope="text, record, index"> <span v-if="text == '1'">正常</span> <span v-if="text == '0'">失效</span> </template>
customRender 的值和slot 的值相对应,slot-scope 中 text就是status的值(text可以自定义,key,item都可以), record 代表text所在的对象,可以通过 record 拿到该行的其他值. 比如
editUser(record){
this.$refs.addModal.showModal(record)
},
把record作为参数传递，编辑改用户信息.
以上这篇如何在 ant 的table中实现图片的渲染操作就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持。