vue+ele实现弹窗显示自定义表格，预览图片

<template>
  <div>
    <el-dialog
      title="详细信息"
      :visible.sync="dialogVisible"
      width="60%"
      :before-close="handleClose"
    >
      <div v-for="item in formList">
        <table
          border="1px solid #000000"
          cellspacing="0"
          cellpadding="0"
          style="width: 100%; margin-bottom: 20px"
        >
          <tr>
            <td style="text-align: center">投递信息：</td>
            <td style="text-align: center">设备ID：</td>
            <td style="text-align: center">{
    
    {
    
     item.deviceId }}</td>
          </tr>
          <tr>
            <td rowspan="4" style="text-align: center">投递详情:</td>
            <td colspan="2" style="text-align: center">
              <el-image
                v-show="item.imagePath"
                style="width: 100px; height: 100px"
                :src="item.imagePath"
                :preview-src-list="[item.imagePath]"
                @click="handleClose"
              >
              </el-image>
              {
    
    {
    
    item.imagePath?"":'暂无图片~'}}
            </td>
          </tr>
          <tr>
            <td style="width: 15%; text-align: center">投递时间:</td>
            <td style="text-align: center">
              <span>{
    
    {
    
     item.createTime }}</span>
            </td>
          </tr>
          <tr>
            <td style="width: 15%; text-align: center">垃圾类型:</td>
            <td style="text-align: center">
              <span>{
    
    {
    
     item.innerTypeName }}</span>
            </td>
          </tr>
          <tr>
            <td style="width: 15%; text-align: center">投递重量:</td>
            <td style="text-align: center">
              <span>{
    
    {
    
     item.weight }}</span>
            </td>
          </tr>
          <tr>
            <td rowspan="4" style="text-align: center">奖励详情:</td>
            <td style="text-align: center">订单编码：</td>
            <td style="text-align: center">
              <span>{
    
    {
    
     item.deliverOrderCode }}</span>
            </td>
          </tr>
          <tr>
            <td style="text-align: center">奖励金额：</td>
            <td colspan="3" style="text-align: center">{
    
    {
    
     item.rewardMoney }}</td>
          </tr>
          <tr>
            <td style="text-align: center">奖励分：</td>
            <td style="text-align: center">
              <span>{
    
    {
    
     item.rewardScore }}</span>
            </td>
          </tr>
          <tr>
            <td style="text-align: center">剩余金额：</td>
            <td style="text-align: center">{
    
    {
    
     item.money }}</td>
          </tr>
          <tr>
            <td rowspan="2" style="text-align: center">范围详情：</td>
            <td style="text-align: center">范围：</td>
            <td style="text-align: center">{
    
    {
    
     item.scope }}</td>
          </tr>
          <tr>
            <td style="text-align: center">范围备注：</td>
            <td style="text-align: center">{
    
    {
    
     item.scopeNote }}</td>
          </tr>
        </table>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" size="mini" @click="handleClose">关闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
    
    
  data() {
    
    
    return {
    
    
      dialogVisible: false, //弹框默认关闭
      formList: [],
    };
  },
  methods: {
    
    
    handleClose(done) {
    
    
      this.dialogVisible = false;
    },
    handleOpen(item) {
    
    
      this.dialogVisible = true;
      // console.log(item);
      let deliverOrderId = {
    
     deliverOrderId: item.id };
      this.$http
        .request("userPushDetailsList", deliverOrderId)
        .then((data) => {
    
    
          // console.log(data);
          this.formList = data.data;
          console.log(this.formList);
        })
        .catch((err) => {
    
    });
    },
  },
};
</script>
<style scoped>
table td {
    
    
  height: 50px;
  border: #cccccc 1px solid;
}
img {
    
    
  height: 110px;
}
</style>

效果图：