el-table-column列表中异步加载图片不显示

在Vue.js的`el-table-column`中，如果需要异步加载图片并显示在列中，可能会遇到数据渲染延迟或者图片未加载完成就不显示的问题。这是因为表格组件默认只会在初始渲染时加载数据，对于异步加载的内容，你需要做以下处理：

1. 使用v-if或v-show进行条件渲染：当图片加载状态未完成时，可以设置`v-if="imageUrl && imageUrl.length > 0"`，这样只有当图片URL存在且非空时才展示。

<template>
  <img :src="imageUrl" v-if="imageUrl && imageUrl.length > 0" :alt="description" />
</template>

<script>
export default {
  data() {
    return {
      imageUrl: '',
      description: '默认描述',
    };
  },
  methods: {
    async loadImage(url) {
      const response = await axios.get(url);
      this.imageUrl = response.data.url; // 网络图片URL
    },
  },
  computed: {
    asyncImage() {
      // 异步获取图片url
      if (!this.imageUrl) {
        // 加载图片
        await this.loadImage('your-image-url');
      }
      return this.imageUrl;
    },
  },
};
</script>

2. 利用`async`和`await`处理异步操作：确保在图片数据加载完成后更新`imageUrl`再触发模板更新。

3. 图片懒加载库：如vue-lazyload或vue-resource等可以帮助优化图片加载性能，避免无谓的网络请求。