首页 > 其他 > 详细

elementUI 表格中预览图片

时间:2019-09-27 16:14:53      阅读:564      评论:0      收藏:0      [点我收藏+]

表格中有一列显示的图片,现需要点击图片,预览该图片,使用的elementui中的previewSrcList做的图片预览,

但是测试发现,无论点击表格中的那张图片,预览的大图都是从第一张图片,开始预览;

后面通过更改每张图片绑定的图片list的顺序,解决了次问题;

页面显示:

<el-table-column property="path" label="图片" align="center">
            <template slot-scope="scope">
              <el-image 
                style="width: 50px; height: 50px"
                :src="scope.row.path" 
                :preview-src-list="scope.row.list"  
                >
              </el-image> 
            </template>
          </el-table-column>

 js:

getDrawerTableList(data) {
      this.drawerTableList = data;
      this.list = [];
      // 表格数据  drawerTableList
      //获取每张图片的地址
      for(var i = 0 ; i < this.drawerTableList.length ; i ++){
        this.list.push(this.drawerTableList[i].path)
      }

      //根据图片顺序(index)更改每张图片绑定的list的图片顺序
      for(var i = 0 ; i < this.drawerTableList.length ; i ++){
        // this.list.push(this.drawerTableList[i].path)
        var container = this.list;

        var frontArr = container.slice(0,i);
        var behindArr = container.slice(i,this.drawerTableList.length);
        var list = behindArr.concat(frontArr) 
        this.drawerTableList[i].list = list;
      }
      
    },

  

elementUI 表格中预览图片

原文:https://www.cnblogs.com/suiyide/p/11598025.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!