如何在 ant 的table中实现图片的渲染
在使用react 的蚂蚁金服的ui库的时候，，平时用到的比较比较多的就是table组件，但是在ant官网上面，并没有在后台调取接口获取数据后，，如何将后台的http://lkjlkjlkj.jpg图片渲染到每一行的例子。。只有一个render的方法。。。查阅了一些资料，作为一个不是很资深的前端来说，忙活了一上午，。实现了这个功能。。。记录一下。。。
这里是table的使用
table中theader的渲染
tableHeader = () => {
return [{
dataIndex: '',
title: 'Logo',
width: 150,
key : 'image',
render:(record) => {
return
}
},{
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 数据渲染,插槽使用
我就废话不都说了，大家还是直接看代码吧~
index">
普通员工
专家
管理员
正常
失效
编辑
// 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 中添加标签
正常 失效
customRender 的值和slot 的值相对应,slot-scope 中 text就是status的值(text可以自定义,key,item都可以), record 代表text所在的对象,可以通过 record 拿到该行的其他值. 比如
editUser(record){
this.$refs.addModal.showModal(record)
},
把record作为参数传递，编辑改用户信息.
以上这篇如何在 ant 的table中实现图片的渲染操作就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持考高分网。
