博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
AntDesign vue学习笔记(六)Table 显示图片
阅读量:4358 次
发布时间:2019-06-07

本文共 586 字,大约阅读时间需要 1 分钟。

AntDeign官网上没有table动态绑定显示图片的示例,baidu上搜索出来的大部分都是React语法,无法使用。

经过摸索,实现方法如下:以显示一个图片,一个按钮为例(picurl是返回的json数据,内容为图片地址)。

1、设置column,scopedslots

const columns = [  { title: '图片',width: 120,dataIndex: 'picurl',fixed: 'left', key: 'pic',scopedSlots: { customRender: 'pic' }},  { title: '操作', key: 'operation', fixed: 'right', width: 100, scopedSlots: { customRender: 'action' } }]

2、设置table slot

备注:img那行也可以写为

图片显示效果

 

 3、操作按钮会显示两列,解决办法:去掉fixed: 'right',或者加一个宽度,比如:fixed: 'right',width: 100即可。

转载于:https://www.cnblogs.com/zhaogaojian/p/11119762.html

你可能感兴趣的文章
Leeo 智能夜灯:默默守护你的家
查看>>
MVC4网站发布到windows server 2003服务器
查看>>
《构建之法》读书笔记
查看>>
细说多线程(上)
查看>>
最长公共子序列(不连续)
查看>>
微服务:Java EE的拯救者还是掘墓人?
查看>>
如何在Centos里面,把.net core程序设为开机自启动
查看>>
1920*1080pc端适配
查看>>
Nutch系列1:简介
查看>>
前端UI框架选择区别对比推荐
查看>>
栈 队列 和 双向队列
查看>>
从垃圾回收看闭包
查看>>
Intel Core Microarchitecture Pipeline
查看>>
如何去除交叉表的子行(列)的小计?
查看>>
Web字体(链接)嵌入
查看>>
switch… case 语句的用法
查看>>
day07补充-数据类型总结及拷贝
查看>>
语言、数据和运算符
查看>>
正则表达式30分钟入门教程
查看>>
sqlserver try catch·
查看>>