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, }, ], } }