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

 

 

 



 


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM