vue循环指令el-table-column展示图片src路径拼接

在Vue中，使用el-table-column展示图片时，可以通过拼接图片路径来设置src属性。这里提供一个简单的例子：

 <template>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column prop="date" label="日期" width="180"></el-table-column>
    <el-table-column label="图标" width="180">
      <template slot-scope="scope">
        <img :src="getImageUrl(scope.row.icon)" alt="图标" />
      </template>
    </el-table-column>
    <!-- 其他列 -->
  </el-table>
</template>
 
<script>
export default {
  data() {
    return {
      tableData: [
        { date: '2016-05-02', icon: 'image1' },
        { date: '2016-05-04', icon: 'image2' },
        // 其他数据...
      ],
      baseImagePath: 'path/to/your/images/' // 图片的基础路径
    };
  },
  methods: {
    getImageUrl(icon) {
      return `${this.baseImagePath}${icon}.png`; // 拼接图片路径
    }
  }
};
</script>