如何在 ant 的table中实现图片的渲染操作
如何在 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中实现图片的渲染操作就是长沙网络推广分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持狼蚁SEO。
编程语言
- ThinkPad 笔记本如何调节LCD屏幕亮度
- Dreamweaver制作网页打开特效教程
- Win10 Mobile 10586升级后无限重启怎么办 硬重启帮您
- Win8系统提示音频设备有问题有一个或多个音频服
- Xbox One版Win10首个预览版9月份发布
- 如何在textarea文本输入区内实现换行
- Win10 Build 9901系统更新 预览版新版本下载
- McAfee Framework存在远程格式串处理漏洞
- Win10家庭版今日(7月30)正式在中国官方商城开卖
- Win10 Mobile预览版更新完10536.1000后才收到10536.100
- Win10 RS2更新了什么-Win10 RS2最终版本号1704首曝
- Windows7如何查看回收站对应的文件夹有哪些方法
- Win10让Charms栏回归桌面的方法教程
- 取消Windows XP系统开机启动画面的小技巧
- win8系统怎么下载安装USB百兆网卡?
- XP系统下磁盘空间变少了怎么办?XP系统磁盘空间