AntDesign vue学习笔记(六)Table 显示图片
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
<a-layout-content>
<a-table :columns="columns" :dataSource="data" :rowSelection="rowSelection">
<a slot="action" href="javascript:;">查看</a>
<img style="width:100px;heigth:100px" slot="pic" slot-scope="text, record" :src=record.picurl />
</a-table>
</a-layout-content>
备注:img那行也可以写为
<img style="width:100px;heigth:100px" slot="pic" slot-scope="text" :src=text />
图片显示效果
3、操作按钮会显示两列,解决办法:去掉fixed: 'right',或者加一个宽度,比如:fixed: 'right',width: 100即可。
网上网友评论:
Ant design Vue
【KPI之王】阿里的作品,阿里在江湖上一直是赫赫威名,
不过都是烂名声,大多数吐槽,只管生不管养。毕竟在在这种复杂大型的公司内部想做出点成绩上位 加上人员变更都是可以理解的
1、支持 vue,angluar,react
2、vue版本的表格列宽不能拖拽,必须设置宽度,不然错位。锁定列时候,内容太多,表头容易留白,多页签的模式下缓存存在....简单来说,不能算是坑,
只能说他们设定的规则太多。需要大量的时间来看文档来适应。年初就有能提了列宽拖拽的问题。到现在也没更改。
AntDesign vue学习笔记(六)Table 显示图片的更多相关文章
- AntDesign vue学习笔记(七)Form 读写与图片上传
AntDesign Form使用布局相比传统Jquery有点繁琐 (一)先读写一个简单的input为例 <a-form :form="form" layout="v ...
- vue学习笔记(六)表单输入绑定
前言 在上一章vue学习笔记(四)事件处理器这一篇博客的内容中,我们已经了解vue是如何绑定事件的,而本篇博客主要讲解的是vue中表单输入的绑定,通常我们自己提交信息的时候都是通过表单将信息到服务器的 ...
- AntDesign vue学习笔记(八)Table服务端分页使用
本文是AntDesign后端分页方法 1.设置pagination <a-table :columns="columns" :dataSource="data&qu ...
- AntDesign vue学习笔记(一)初始化项目
最近学习AntDesign组件使用,官方Pro例子集成度太高,不容易学习,将从最基础组件一个一个搭建. 1.创建Vue Cli项目 2.引入ant design组件 $ cnpm i --save a ...
- AntDesign vue学习笔记(九)自定义文件上传
第七节时提到,上传文件时实际可能需要传输一个token. 1.查看vue antdesign文档https://vue.ant.design/components/upload-cn/ 2.使用cus ...
- AntDesign vue学习笔记(四)使用组件切换
同样实现上一篇功能, 改为使用组件切换,实现方法如下 1.修改MainFrm中的<router-view/>如下代码 2.注册局部组件 export default { name: 'Ma ...
- AntDesign vue学习笔记(三)嵌套路由使用
本项目目前结构如下 1.Login页面=>MainFrm页面=>MainFrm左部菜单,右边是显示区域可以切换子页面. 2.当点击左部菜单时,右边的子页面随着进行切换. 实现关键代码如下1 ...
- Vue学习笔记六:v-model 数据双向绑定
目录 v-model简介和适用范围 新建HTML 所见即所得 v-model模拟简易计算器 v-model简介和适用范围 Vue的一大特点之一就是数据的双向绑定,v-model就是实现这个功能的指令, ...
- AntDesign vue学习笔记(五)导航菜单动态加载
一般的后台系统都有一个树形导航菜单,具体实现如下,主要参考https://my.oschina.net/u/4131669/blog/3048416 "menuList": [ { ...
随机推荐
- Winform中实现跨窗体获取ZedGraph的ZedGraphControl控件对象
场景 Winforn中设置ZedGraph曲线图的属性.坐标轴属性.刻度属性: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/10 ...
- nginx root与alias
root和alias都可以定义在location模块中,都是用来指定请求资源的真实路径,但又有区别: 采用如下设置 location /static/ { root /data/w3; } 实际访问h ...
- 基于wince系统开发的 SQLServe Mobile数据库应用
SQLServe Mobile数据库以前的版本是SQLServe CE,现在最新的是3.5的版本,最近用vs2008做了一个小程序,是对SQLServe Mobile数据库读写数据. 注:SQLSer ...
- 【学习笔记】PYTHON数据分析与展示(北理工 嵩天)
0 数据分析之前奏 课程主要内容:常用IDE:本课程主要使用:Anaconda Anaconda:一个集合,包括conda.某版本Python.一批第三方库等 -支持近800个第三方库 -适合科学计算 ...
- itextpdf中表格中单元格的文字水平垂直居中的设置
在使用itextpdf中,版本是5.5.6,使用Doucument方式生成pdf时,设置单元格中字体的对齐方式时,发现一些问题,并逐渐找到了解决方式. 给我的经验就是:看官网的例子才能保证代码的效果, ...
- Linux IO 概念(2)
在上一篇IO底层的概念中杂合了很多模糊的概念,受知识水平的限制,只是从网上抄了很多过来.从linux一切皆文件的设计哲学,介绍了文件描述符,从进程的运行内存分配,进程的切换,介绍了进程的阻塞,以及引出 ...
- The Best Blockchain Open Source Projects
https://101blockchains.com/blockchain-open-source/ Blockchain has been the buzzword of the year for ...
- serialize()和new FormData()的区别
serialize()和FormData对象都可将表单数据序列化,后通过ajax异步提交 ,序列化表单就是将form表单中所有name属性序列化成KEY-VALUE的形式,提交到后台,后台以对象相应的 ...
- 从rpm包提取rpm spec 的几种方法
包含了源码包 先安装,然后在rpmbuild 目录直接可以查看文件 不用安装 ,使用rpm2cpio rpm2cpio myrpm.src.rpm | cpio -civ '*.spec' 没有源码 ...
- django -- web框架的本质
web框架本质 我们可以这样理解:所有的Web应用本质上就是一个socket服务端,而用户的浏览器就是一个socket客户端. 这样我们就可以自己实现Web框架了. 下面代码是一个简单的socket服 ...