表格中有一列顯示的圖片,現需要點擊圖片,預覽該圖片,使用的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;
}
},
