7、如何在表格中插入图片?

方法:通过作用域插槽,根据图片id,动态解析图片地址

完整案例:
tableCom组件:
<a-table :rowKey="(record,index)=>{return index}" :columns="columns" :data-source="data" :pagination="pagination" :scroll="scroll" >
     //此处是重点
      <div slot="photo" slot-scope="text">
        <img :src="photoSrc(text)" alt="" srcset="" style="width:60px;height:80px">
      </div>
      
      <span slot="escortWayScopedSlots" slot-scope="text">
        {{ 'yaJieFangShi' | dictType(text) }}
      </span>
          
</a-table>

data(){
    return{
      //拼接图片地址
      photoSrc:(text)=>{           
        return process.env.VUE_APP_API_BASE_URL+'/sysFileInfo/preview?id='+text
      }
    }
},

TimeTaskLogin.vue:
import tableCom from '@/components/work/tableCom.vue'

components: {
    tableCom,
},
data(){
  return{
     columns1: [
        {
          title: '姓名',
          dataIndex: 'policeName',
          key: 'policeName',
          align: 'center',
          width: 120,
        },
        {
          title: '照片',
          dataIndex: 'poliecePhoto',
          key: 'poliecePhoto',
          //作用域插槽
          scopedSlots: { customRender: 'photo' },
          align: 'center',
          width: 120,
        },          
      ],
  }
}

 

 

 



 

posted @ 2022-02-19 15:11  手可弹钢琴  阅读(831)  评论(0编辑  收藏  举报