如何在 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="如何在 ant 的table中實現圖片的渲染操作" style={{width:'5  0px',height:'50px',borderRadius:'50%'}}/>
     }
   },{
     dataIndex: 'name',title: '名稱',key : 'name'
   },{
     dataIndex: 'label',title: '標籤',key : 'label'
   },{
     dataIndex: 'collectCount',title: '關注數',key : 'collectCount'
   },{
     dataIndex: 'topicCount',title: '帖子數',key : 'topicCount'
   },{
     dataIndex: 'inTime',title: '建立時間',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,index">
      <span v-if="text == '1'">正常</span>
      <span v-if="text == '0'">失效</span>
    </template>
    <template slot="action" slot-scope="text,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,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中實現圖片的渲染操作就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支援我們。