vue点击按钮调用，选中的el-table中的某一行的面单列的url地址，并用弹窗展示出对应的图片，请写出完整的代码并做解释

下面是一个示例代码，实现了点击按钮弹窗展示表格中选中行的图片：

<template>
  <div>
    <el-table
      ref="table"
      :data="tableData"
      @row-click="handleRowClick"
      style="width: 100%">
      <el-table-column
        prop="name"
        label="姓名"
        width="180">
      </el-table-column>
      <el-table-column
        prop="address"
        label="地址"
        width="180">
      </el-table-column>
      <el-table-column
        prop="express"
        label="快递单号"
        width="180">
      </el-table-column>
      <el-table-column
        label="操作"
        width="120">
        <template slot-scope="scope">
          <el-button type="primary" size="small" @click="showImage(scope.row.express)">查看图片</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog
      :visible.sync="dialogVisible"
      width="50%">
      <img :src="imageUrl" style="width: 100%">
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { name: '张三', address: '北京市', express: '1001001' },
        { name: '李四', address: '上海市', express: '1001002' },
        { name: '王五', address: '广州市', express: '1001003' }
      ],
      dialogVisible: false,
      imageUrl: ''
    }
  },
  methods: {
    handleRowClick(row, column, event) {
      this.$refs.table.setCurrentRow(row)
    },
    showImage(express) {
      // 根据选中行的快递单号获取图片地址
      this.imageUrl = `http://www.example.com/express/${express}.jpg`
      this.dialogVisible = true
    }
  }
}
</script>

其中，`el-table` 组件用来展示数据表格，`el-button` 组件用来触发弹窗，`el-dialog` 组件用来展示图片。

在 `data` 中定义了表格数据 `tableData`，弹窗是否可见 `dialogVisible`，以及图片地址 `imageUrl`。

在表格中的操作列中，点击按钮时触发 `showImage` 方法，将选中行的快递单号传入方法中，根据快递单号拼接图片地址，并将弹窗可见性设置为 `true`。

在弹窗中，使用 `img` 标签展示图片，图片地址绑定到 `imageUrl` 上。弹窗可见性绑定到 `dialogVisible` 上，点击弹窗右上角的关闭按钮或者按下 ESC 键可以关闭弹窗。