1. 程式人生 > 其它 >7、如何在表格中插入圖片?

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