如何在 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 相关文章推荐
jQuery弹出层插件简化版代码下载
Oct 16 Javascript
页面加载完毕后滚动条自动滚动一定位置
Feb 20 Javascript
jQuery性能优化的38个建议
Mar 04 Javascript
js创建一个input数组并绑定click事件的方法
Jun 12 Javascript
JavaScript通过字典进行字符串翻译转换的方法
Mar 19 Javascript
canvas实现图像布局填充功能
Feb 06 Javascript
js中删除数组中的某一元素实例(无下标时)
Feb 28 Javascript
JavaScript使用ZeroClipboard操作剪切板
May 10 Javascript
基于Vue实现微信小程序的图文编辑器
Jul 25 Javascript
15分钟深入了解JS继承分类、原理与用法
Jan 19 Javascript
怎么使用javascript深度拷贝一个数组
Jun 06 Javascript
javascript canvas API内容整理
Feb 16 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后台程序与Javascript的两种交互方式
2009/10/25 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(十六)
2014/06/30 PHP
浅析PHP文件下载原理
2014/12/25 PHP
PHP通过GD库实现验证码功能示例
2019/02/23 PHP
jQuery 翻牌或百叶窗效果(内容三秒自动切换)
2012/06/14 Javascript
JavaScript常用全局属性与方法记录积累
2013/07/03 Javascript
jquery实现可拖动DIV自定义保存到数据的实例
2013/11/20 Javascript
jquery选择器使用详解
2014/04/08 Javascript
jquery实现勾选复选框触发事件给input赋值
2015/02/01 Javascript
jquery实现很酷的网页顶部图标下拉菜单效果
2015/08/22 Javascript
基于jQuery实现表格的查看修改删除
2016/08/01 Javascript
关于Javascript中defer和async的区别总结
2016/09/20 Javascript
JavaScript动态检验密码强度的实现方法
2016/11/09 Javascript
js继承实现方法详解
2016/12/16 Javascript
JavaScript Date 知识浅析
2017/01/29 Javascript
Angular.js实现多个checkbox只能选择一个的方法示例
2017/02/24 Javascript
JS jQuery使用正则表达式去空字符的简单实现代码
2017/05/20 jQuery
js表单序列化判断空值的实例
2017/09/22 Javascript
react-native-video实现视频全屏播放的方法
2018/03/19 Javascript
vue-i18n结合Element-ui的配置方法
2019/05/20 Javascript
解决vue项目运行提示Warnings while compiling.警告的问题
2020/09/18 Javascript
jQuery实现简单弹幕制作
2020/12/10 jQuery
python读写文件操作示例程序
2013/12/02 Python
Python生成器(Generator)详解
2015/04/13 Python
详解Python函数作用域的LEGB顺序
2016/05/14 Python
python中virtualenvwrapper安装与使用
2018/05/20 Python
python中的数据结构比较
2019/05/13 Python
Python 用matplotlib画以时间日期为x轴的图像
2019/08/06 Python
为什么黑客都用python(123个黑客必备的Python工具)
2020/01/31 Python
英国时尚运动品牌的合集:The Sports Edit
2017/12/20 全球购物
size?荷兰官方网站:英国高级运动鞋精品店
2020/07/24 全球购物
大专生自荐信
2013/10/04 职场文书
汉语言文学毕业生自荐信范文
2014/03/24 职场文书
大学理论知识学习自我鉴定
2014/04/28 职场文书
2014年优质护理服务工作总结
2014/11/14 职场文书
党小组考察意见
2015/06/02 职场文书