elementUI 表格中预览图片
表格中有一列显示的图片,现需要点击图片,预览该图片,使用的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; } },