如何在 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 相关文章推荐
js如何实现设计模式中的模板方法
Jul 23 Javascript
深入领悟JavaScript中的面向对象
Nov 18 Javascript
Vue表单实例代码
Sep 05 Javascript
javascript鼠标跟随运动3种效果(眼球效果,苹果菜单,方向跟随)
Oct 27 Javascript
使用JS批量选中功能实现更改数据库中的status状态值(批量展示)
Nov 22 Javascript
Vue-Router进阶之滚动行为详解
Sep 13 Javascript
移动web开发之touch事件实例详解
Jan 17 Javascript
babel之配置文件.babelrc入门详解
Feb 22 Javascript
vue.js实现格式化时间并每秒更新显示功能示例
Jul 07 Javascript
Vue 开发音乐播放器之歌手页右侧快速入口功能
Aug 08 Javascript
Vue一次性简洁明了引入所有公共组件的方法
Nov 28 Javascript
vue引用外部JS的两种种方法
Jan 28 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生成的html meta和link标记在body标签里 顶部有个空行
2010/05/18 PHP
Google Voice 短信发送接口PHP开源版(2010.5更新)
2010/07/22 PHP
php setcookie(name, value, expires, path, domain, secure) 参数详解
2013/06/28 PHP
关于php循环跳出的问题
2013/07/01 PHP
DOM XPATH获取img src值的query
2013/09/23 PHP
php使用ob_start()实现图片存入变量的方法
2014/11/14 PHP
PHP实现图片不变型裁剪及图片按比例裁剪的方法
2016/01/14 PHP
crontab无法执行php的解决方法
2016/01/25 PHP
PHP http请求超时问题解决方案
2020/11/13 PHP
jQuery新闻滚动插件 jquery.roller.js
2011/06/27 Javascript
js简单实现HTML标签Select联动带跳转
2013/10/23 Javascript
jQuery控制TR显示隐藏的三种常用方法
2014/08/21 Javascript
JS字符串的切分用法实例
2016/02/22 Javascript
nodeJs内存泄漏问题详解
2016/09/05 NodeJs
vuex实现及简略解析(小结)
2019/03/01 Javascript
Vue.js构建你的第一个包并在NPM上发布的方法步骤
2019/05/01 Javascript
基于vue-cli3和element实现登陆页面
2019/11/13 Javascript
[11:27]《一刀刀一天》之DOTA全时刻20:TI4总奖金突破920W TS赛事分析
2014/06/18 DOTA
Python使用requests发送POST请求实例代码
2018/01/25 Python
python实现RabbitMQ的消息队列的示例代码
2018/11/08 Python
Python设计模式之代理模式实例详解
2019/01/19 Python
2020最新pycharm汉化安装(python工程狮亲测有效)
2020/04/26 Python
Python 解析简单的XML数据
2020/07/24 Python
总结Pyinstaller的坑及终极解决方法(小结)
2020/09/21 Python
前端隐藏出边界内容的实现方法
2016/04/14 HTML / CSS
英国花园家具中心:Garden Furniture Centre
2017/08/24 全球购物
美国电子元器件分销商:Newark element14
2018/01/13 全球购物
如何利用cmp命令比较文件
2013/09/23 面试题
初二政治教学反思
2014/01/12 职场文书
总经理岗位职责范本
2014/02/02 职场文书
设计师个人求职信范文
2014/02/02 职场文书
单位员工收入证明样本
2014/10/09 职场文书
使用php的mail()函数实现发送邮件功能
2021/06/03 PHP
mysql 获取时间方式
2022/03/20 MySQL
Java8 CompletableFuture 异步回调
2022/04/28 Java/Android
html中两种获取标签内的值的方法
2022/06/16 jQuery