如何在 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 相关文章推荐
List the UTC Time on a Computer
Jun 11 Javascript
jQuery之网页换肤实现代码
Apr 30 Javascript
jquery 构造函数在表单提交过程中修改数据
May 25 Javascript
JS实现的鼠标跟随代码(卡通手型点击效果)
Oct 26 Javascript
javascript图片切换综合实例(循环切换、顺序切换)
Jan 13 Javascript
javascript瀑布流布局实现方法详解
Feb 17 Javascript
JS回调函数简单用法示例
Feb 09 Javascript
vue.js全局API之nextTick全面解析
Jul 07 Javascript
react-native之ART绘图方法详解
Aug 08 Javascript
Vue导出json数据到Excel电子表格的示例
Dec 04 Javascript
angularJs中ng-model-options设置数据同步的方法
Sep 30 Javascript
Vue 解决在element中使用$notify在提示信息中换行问题
Nov 11 Javascript
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获取mysql数据表的字段名称和详细信息的方法
2014/09/27 PHP
PHP判断FORM表单或URL参数来的数据是否为整数的方法
2016/03/25 PHP
在laravel5.2中实现点击用户头像更改头像的方法
2019/10/14 PHP
Add Formatted Data to a Spreadsheet
2007/06/12 Javascript
javascript cookie解码函数(兼容ff)
2008/03/17 Javascript
二行代码解决全部网页木马
2008/03/28 Javascript
ASP.NET jQuery 实例12 通过使用jQuery validation插件简单实现用户注册页面验证功能
2012/02/03 Javascript
JS处理json日期格式化问题
2015/10/01 Javascript
深入解析jQuery中Deferred的deferred.promise()方法
2016/05/03 Javascript
使用JavaScript判断手机浏览器是横屏还是竖屏问题
2016/08/02 Javascript
js 颜色选择插件
2017/01/23 Javascript
jQuery结合jQuery.cookie.js插件实现换肤功能示例
2017/10/14 jQuery
微信小程序模拟cookie的实现
2018/06/20 Javascript
为什么要使用Vuex的介绍
2019/01/19 Javascript
微信小程序MUI导航栏透明渐变功能示例(通过改变rgba的a值实现)
2019/01/24 Javascript
Jquery动态列功能完整实例
2019/08/30 jQuery
谈谈JavaScript令人迷惑的==与+
2020/08/31 Javascript
vue-cli3自动消除console.log()的调试信息方式
2020/10/21 Javascript
JavaScript实现H5接金币功能(实例代码)
2021/02/22 Javascript
python encode和decode的妙用
2009/09/02 Python
python list转dict示例分享
2014/01/28 Python
python中不能连接超时的问题及解决方法
2018/06/10 Python
Django实现支付宝付款和微信支付的示例代码
2018/07/25 Python
详解Python3定时器任务代码
2019/09/23 Python
Python守护进程实现过程详解
2020/02/10 Python
python矩阵运算,转置,逆运算,共轭矩阵实例
2020/05/11 Python
Django实现任意文件上传(最简单的方法)
2020/06/03 Python
Python轻量级web框架bottle使用方法解析
2020/06/13 Python
Python中flatten( ),matrix.A用法说明
2020/07/05 Python
服务之星获奖感言
2014/01/21 职场文书
经营管理策划方案
2014/05/22 职场文书
工伤事故赔偿协议书范文
2014/09/24 职场文书
幼儿园开学家长寄语(2016春季)
2015/12/03 职场文书
Canvas跟随鼠标炫彩小球的实现
2021/04/11 Javascript
解决MultipartFile.transferTo(dest) 报FileNotFoundExcep的问题
2021/07/01 Java/Android
本地搭建minio文件服务器(使用bat脚本启动)的方法
2022/07/15 Servers