vue+elmentui在table上回显图片
1.单张
<el-table-column label="签名"> <template slot-scope="scope"> <img :src="scope.row.signNameUrl" width="80" height="80" class="head_pic"/> </template> </el-table-column>
2.多张
<el-table-column prop="pictures" label="描述图片"> <template scope="scope"> <img v-for="item in scope.row.pictures" :src="item" width="40" height="40" class="head_pic"/> </template> </el-table-column>
3.点击图片预览
<el-table-column prop="remarks" label="走访记录及问题反馈"> <template slot-scope="scope"> <el-image style="width: 50px;height: 50px;margin:0px 1px" :key="index" v-for="(item,index) in scope.row.fileList" :src="item.fileUrl" @click="previewImg(item.fileUrl)"> </el-image> </template> </el-table-column>
export default { data() { return { imageUrl: '', imgVisible: false, } }, methods: { previewImg(url) { this.imageUrl = url this.imgVisible = true }, } }