大多数人都知道使用过elementUI组件库的Image组件，但该组件附带了图像预览功能，可以从preview-src-list传递需要预览的图像url列表
鲍马斯特使用此功能对数组进行循环渲染。 具体的渲染代码如下。
divclass=' img-wrap ' v-for=' (item， index ) inbaseboardlist ' : key=' index ' El-image : src=' item.src ' : preview-src-list=' base board preve ckselectbaseboard(item.src，item.id ) (Iclass='El-icon ) ) ) ) ) 652 baseboardPreviewList显示用于预览的图像url的为了业务需要，循环中必须包含允许用户选择图像的DOM，即代码中class为icon-wrap的div元素。
由于v-for循环将生成多个el-image组件，并且使用相同的baseboardPreviewList进行预览，因此无论用户单击哪个图像，预览数组的开头都将如下图所示这显然不符合商业需要。
很明显，无论用户单击哪个图像，预览都从第一个图像开始。
怎么解决？ 由于业务需要，无法在el-image组件级别循环，因为只能通过外部div包裹内部el-image组件和class为icon-wrap的div元素来循环渲染。
因为从DOM作为切入点是安全的，所以将目光投向数据层。 由于所有el-image组件都共享baseboardPreviewList的预览功能，因此当用户单击图像时，会对名为baseboardPreviewList的数组进行排序，并显示用户单击的图像的预览将后续的图像url按顺序推入新数组，最后将用户单击的图像顺序前面的图像按顺序推入新数组，然后将生成的这个新数组赋值为新的预览数组。
我说的可能有点绕圈子，直接看看代码层吧。
博主首先在el-image组件中定义点击事件@ click=' handleclickprebaseboard (item.src ) '，在事件中将用户点击的图像url作为传输参数
//图像预览事件handleclickprebaseboard(src ) { let newList=[] //用于获取与用户单击的图像相对应的数组的新数组let i=0 //I的下标let length=this.baseboardprevivity定义/原始数组的长度//在一次some遍历中，与当前url对应的下标首先位于I this.baseboardpreviewlist.some (index ((if ) src===item ) newlist.push ) item同时new list.push (this.baseboardpreviewlist.slice (i1，length ) ) /压入顺序在当前图像之后的图像URL new list.push.this.base board DH I )//在压入顺序早于当前图像的图像URL this.baseboardpreviewlist=new list//重新赋值)单击事件中，将原始预览阵列设置为使用户单击的图像的URL位于阵列的第一个项目这样可以保证用户每次点击都会预览当前的图像。 效果图如下。
实际上，在没有进行优化之前，在当地运营项目的博主没有发现这个问题，但当项目上线或其他同事在当地运营项目时，一定会出现这个问题。
博主仔细研究了代码和UI库的版本号，但都一致。 但是，博客的当地在优化前和优化后都没有这个问题。 这非常奇怪，暂时不知道。 如果大人物有明确指向迷津的话！