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

 更新时间:2020年10月28日 11:01:19   作者:haolijuan520  
这篇文章主要介绍了如何在 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'
   }]
 }

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

相关文章

  • 使用vue3实现一个人喵交流小程序

    使用vue3实现一个人喵交流小程序

    Vue3 在经过多个开发版本的迭代后,终于迎来了它的正式版本,下面这篇文章主要给大家介绍了关于如何使用vue3实现一个人喵交流小程序的相关资料,需要的朋友可以参考下
    2021-11-11
  • vue组件中节流函数的失效的原因和解决方法

    vue组件中节流函数的失效的原因和解决方法

    这篇文章主要介绍了vue组件中节流函数的失效和解决方法,帮助大家更好的理解和学习vue框架,感兴趣的朋友可以了解下
    2020-12-12
  • Vue之Axios异步通信详解

    Vue之Axios异步通信详解

    这篇文章主要为大家介绍了Vue之Axios异步通信,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能够给你带来帮助
    2021-11-11
  • 关于Vue CLI3中启动cli服务参数说明

    关于Vue CLI3中启动cli服务参数说明

    这篇文章主要介绍了关于Vue CLI3中启动cli服务参数说明,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-04-04
  • vue 监听屏幕高度的实例

    vue 监听屏幕高度的实例

    今天小编就为大家分享一篇vue 监听屏幕高度的实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-09-09
  • vue的url请求图片的问题及请求失败解决

    vue的url请求图片的问题及请求失败解决

    这篇文章主要介绍了vue的url请求图片的问题及请求失败解决方案,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-09-09
  • ant design vue中table表格滚动加载实现思路

    ant design vue中table表格滚动加载实现思路

    在处理一写数据量特别大的情况下,我们不能把后端的数据一次性全部拿到前端在table表格中展示,为了考虑性能优化,使用了滚动加载表格数据,这篇文章主要介绍了ant design vue中table表格滚动加载实现思路,需要的朋友可以参考下
    2024-07-07
  • vue3.2自定义弹窗组件结合函数式调用示例详解

    vue3.2自定义弹窗组件结合函数式调用示例详解

    这篇文章主要为大家介绍了vue3.2自定义弹窗组件结合函数式调用示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-09-09
  • vue实现简易的双向数据绑定

    vue实现简易的双向数据绑定

    这篇文章主要介绍了vue如何实现简易的双向数据绑定,帮助大家更好的理解和使用vue框架,感兴趣的朋友可以了解下
    2020-12-12
  • vue.js组件之间传递数据的方法

    vue.js组件之间传递数据的方法

    本篇文章主要介绍了vue.js组件之间传递数据的方法,组件实例的作用域是相互独立的,如何传递数据也成了组件的重要知识点之一,有兴趣的可以了解一下
    2017-07-07

最新评论