1. Rendering
The effect picture is basically like this, if you need this effect, you can look down;
Two, the code part
1. First briefly recount the principle
Because one or more pictures are stored in a table, the data related to the pictures received by the front end must be an array type, so v-for="(item,index) in xxx" is used at this time: key ="index" method, when it comes to this, I don’t know if you have been inspired a little bit, if not, just go to the code:
2. The template part
//images就是后端传递的图片的数组类型数据
//<el-table-column>包裹一个<template>标签，然后在包裹element-ui的image大图组件
//然后就用到了上边说的v-for="(item, index) in scope.row.images" :key="index"这个重要的知识点
//：src是图片的url
//:preview-src-list是展示大图的数组
<el-table-column prop="images" label="配图" align="center" width="150">
<template slot-scope="scope">
<el-image v-for="(item, index) in scope.row.images" :key="index":src="item"
:preview-src-list="[item]" >
</el-image>
</template>
</el-table-column>3、script
There is actually no code in this part, let’s retell it orally, because the back-end uploads are different, but one thing must be an array type, the code in the above picture is valid, of course, if you just send it to you one by one There is no need to store multiple pictures in a table, so there is no need to use v-for, right?
In fact, there is no difficulty, it just depends on your understanding of v-for
Friends, that’s all the valuable knowledge in this article, if it helps you, that’s the best!
Not for anything else, just to record our own experience, let us keep learning and making progress!