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
		},
    }
}

你可能感兴趣的:(element)