vue el-table使用、el-popover关闭、el-image大图预览

1、html

<el-table :data="list" :header-cell-style="{ background: '#F7F8F9' }"><el-table-column type="index" width="100px" label="序号"></el-table-column><el-table-column prop="pic" label="图片" width="100"><template #default="{ row }"><img :src="picUrl + row.img" alt=""></template></el-table-column><el-table-columnv-for="(columnInfo, columnIndex) in tableColumn":key="columnIndex":prop="columnInfo.code":label="columnInfo.label":width="columnInfo.width || 'auto'"><template slot-scope="scope">{{ scope.row[columnInfo.code] || '-' }}</template></el-table-column><el-table-column prop="postInfo" label="运单" align="center" ><template slot-scope="scope"><span v-html="scope.row.postInfo"></span></template></el-table-column><el-table-column v-if="order.orderStatus === '已付款'" prop="operation" label="操作" align="center" width="100"><template slot-scope="scope"><!-- trigger="hover"  --><el-popover v-show="!scope.row.postNum" ref="popoverRef" placement="bottom"><!-- 这里是弹窗弹出来的样式（start）-------><div class="pop"></div><!-- 这里是弹窗弹出来的样式（end）-------><div slot="reference"><!-- 这里是触发弹窗弹出来的样式（start）-------><div class="item-edit"></div><!-- 这里是触发弹窗弹出来的样式（start）-------></div></el-popover></template></el-table-column>
</el-table>             

tableColum 格式

export const tableColum = [ {label: '姓名',code: 'name',type: 'normal',width: '55',},{label: '手机号',code: 'tel',type: 'template',},
]

2、关闭popover

this.$refs.popover.doClose()

3、el-image 图片大图预览-详解

el-image
el-image-view