element開發 - table組件中實現多圖片預覽

業務需求：表格中有一組圖片，每次點擊圖片，預覽該圖片。

開發問題：點擊表格中的任意一張圖片，預覽圖都是從第一張圖片，開始預覽。

解決方案：preview-src-list 綁定函數返回新數組。

<el-table :data="list" @current-change="handleCurrentChange">
	<!-- ...... -->
	<el-table-column label="圖片">
		<template slot-scope="scope">
			<el-image
			v-for="(o, i) in scope.row.imgs" :key="i" style="width:40px;height:40px;"
			:src="o" :preview-src-list="previewImgs(o, scope.row.imgs)"></el-image>
		</template>
	</el-table-column>
	<!-- ...... -->
</el-table>

export default {
	data() {
		list: [
			{ imgs: ['','',''] },
			{ imgs: ['','',''] },
			{ imgs: ['','',''] },
		]
	},
	methods: {
		previewImgs(img, imgs) {
			let index = imgs.indexOf(img)
			let frontArr = imgs.slice(0, index)
			let behindArr = imgs.slice(index, imgs.length)
			let list = behindArr.concat(frontArr)
			return list
		},
    }
}