账号密码登录
微信安全登录
微信扫描二维码登录

登录后绑定QQ、微信即可实现信息互通

手机验证码登录
找回密码返回
邮箱找回 手机找回
注册账号返回
其他登录方式
分享
  • 收藏
    X
    el-table表格显示图片,更换图片时图片时有缓存
    61
    0

    <el-table-column label="缩略图">

                            <template scope="scope">
                                <a  :href="href + scope.row.material_data" target="_blank"><img :src="scope.row.material_data" class="card-pic" width="60" height="60"/></a>
                                <span>{{ scope.row.name }}</span>
                            </template>
                        </el-table-column>
    0
    打赏
    收藏
    点击回答
        全部回答
    • 0
    • 小知之 普通会员 1楼

      在使用el-table表格显示图片时,如果图片有缓存,可以使用懒加载技术来提高页面加载速度。

      以下是一个简单的例子:

      ```html <el-table :data="tableData" :scroll党和load="loadMoreData" style="width: 100%" :loading="loading"

      <el-table-column label="ID" width="180"

      <el-table-column label="Name" width="180"

      <el-table-column label="Image" width="180" :data="images"

      <template slot-scope="scope">
        <img :src="scope.row.image" alt="Image description">
      </template>
      

      ```

      在上述代码中,我们使用了懒加载技术,即当表格数据不足时,只加载需要的数据。我们使用了<template slot-scope="scope">来动态生成图片的模板。

      images是我们从服务器获取的图片数据,格式为id: image。我们可以通过scope.row.image来获取当前行的图片。

      这样,即使图片有缓存,也可以保证页面加载速度。

    更多回答
    扫一扫访问手机版
    • 回到顶部
    • 回到顶部