如何在 ant 的table中实现图片的渲染操作


Posted in Javascript onOctober 28, 2020

如何在 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'
   }]
 }

如何在 ant 的table中实现图片的渲染操作

利用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中实现图片的渲染操作就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript 继承实现方法
Aug 26 Javascript
基于jquery的不规则矩形的排列实现代码
Apr 16 Javascript
JQueryEasyUI datagrid框架的基本使用
Apr 08 Javascript
Javascript刷新窗口方法小结
Oct 21 Javascript
jQuery文本框得到与失去焦点动态改变样式效果
Sep 08 Javascript
Javascript 事件冒泡机制详细介绍
Oct 10 Javascript
jQuery EasyUI中的日期控件DateBox修改方法
Nov 09 Javascript
JS中Map和ForEach的区别
Feb 05 Javascript
JavaScript门道之标准库
May 26 Javascript
vant(ZanUi)结合async-validator实现表单验证的方法
Dec 06 Javascript
vue路由前进后退动画效果的实现代码
Dec 10 Javascript
vue祖孙组件之间的数据传递案例
Dec 07 Vue.js
WebStorm中如何将自己的代码上传到github示例详解
Oct 28 #Javascript
原生JS生成指定位数的验证码
Oct 28 #Javascript
微信小程序接入vant Weapp组件的详细步骤
Oct 28 #Javascript
Ant-design-vue Table组件customRow属性的使用说明
Oct 28 #Javascript
通过JS判断网页是否为手机打开
Oct 28 #Javascript
ant design vue嵌套表格及表格内部编辑的用法说明
Oct 28 #Javascript
解决ant design vue 表格a-table二次封装,slots渲染的问题
Oct 28 #Javascript
You might like
基于PHP常用函数的用法详解
2013/05/10 PHP
解析PHP中ob_start()函数的用法
2013/06/24 PHP
php+html5基于websocket实现聊天室的方法
2015/07/17 PHP
php将远程图片保存到本地服务器的实现代码
2015/08/03 PHP
TP - 比RBAC更好的权限认证方式(Auth类认证)
2021/03/09 PHP
Confirmer JQuery确认对话框组件
2010/06/09 Javascript
Web前端设计模式  制作漂亮的弹出层
2010/10/29 Javascript
Jquery中获取iframe的代码
2011/01/11 Javascript
JS 按钮点击触发(兼容IE、火狐)
2013/08/07 Javascript
IE8下String的Trim()方法失效的解决方法
2013/11/08 Javascript
node.js中的fs.fchmod方法使用说明
2014/12/16 Javascript
Angular用来控制元素的展示与否的原生指令介绍
2015/01/07 Javascript
在for循环中length值是否需要缓存
2015/07/27 Javascript
Bootstrap多级导航栏(级联导航)的实现代码
2016/03/08 Javascript
Javascript实现鼠标框选操作  不是点击选取
2016/04/14 Javascript
Bootstrap所支持的表单控件实例详解
2016/05/16 Javascript
jQuery实现模拟flash头像裁切上传功能示例
2016/12/11 Javascript
JavaScript实现的数字与字符串转换功能示例
2017/08/23 Javascript
Fetch超时设置与终止请求详解
2019/05/18 Javascript
自定义Vue组件打包、发布到npm及使用教程
2019/05/22 Javascript
layui form.render('select', 'test2') 更新渲染的方法
2019/09/27 Javascript
OpenLayers加载缩放控件使用方法详解
2020/09/25 Javascript
Python使用装饰器进行django开发实例代码
2018/02/06 Python
Python拼接字符串的7种方式详解
2020/03/19 Python
CSS3教程(10):CSS3 HSL声明设置颜色
2009/04/02 HTML / CSS
HTML5中语义化 b 和 i 标签
2008/10/17 HTML / CSS
html5各种页面切换效果和模态对话框用法总结
2014/12/15 HTML / CSS
Html5之自定义属性(data-,dataset)
2019/11/19 HTML / CSS
Zavvi荷兰:英国大型音像制品和图书游戏零售商
2018/03/22 全球购物
The North Face北面美国官网:美国著名户外品牌
2018/09/15 全球购物
精选奢华:THE LIST
2019/09/05 全球购物
Yahoo-PHP面试题4
2012/05/05 面试题
白血病募捐倡议书
2014/05/14 职场文书
甘南现象心得体会
2014/09/11 职场文书
2015年科学教研组工作总结
2015/07/22 职场文书
教你用Java在个人电脑上实现微信扫码支付
2021/06/13 Java/Android