方法:通过作用域插槽,根据图片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,
},
],
}
}