el-table 放入图片，使用 v-if 的情况下如何处理 v-slot

el-table如果单纯的处理字符信息，只需要使用prop就可以解决了。
但是，如果想要放入图片，就必须使用 v-slot 取得组件传回来的 row.url，如果是单独写的 el-table-column ，直接拿就行了。
但如果使用 v-for 循环出来的 el-table-column ，还得加判断才能决定放在哪一行。

<template>
  <div>
    <el-table :data="list">
      <el-table-column
        v-for="(col, index) in columns"
        :key="index"
        :prop="col.prop"
        :type="col.type"
      >
        <template v-slot="{ row }">
          <img v-if="index==2" :src="row.url" alt="" />
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: [
        {name: "he", age: 18, sex: "male",
          url: "https://img0.baidu.com/it/u=2862534777,914942650&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500",
        },
        {name: "qi",age: 20,sex: "female",
          url: "https://img0.baidu.com/it/u=530426417,2082848644&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500",
        },
        {name: "ming", age: 25, sex: "male",
          url: "https://img2.baidu.com/it/u=1814268193,3619863984&fm=253&fmt=auto&app=138&f=JPEG?w=632&h=500",
        },
      ],
      columns: [
        { label: "000", type: "index" },
        { label: "111", prop: "name" },
        { label: "222", prop: "age" },
        { label: "333", prop: "sex" },
      ],
    };
  },
};
</script>

此时就出现问题了，除了 index=2 的图片出来以外，其他单元格的prop失效了。

解决个问题，只能不用prop，全部在 template 里用v-if判断

<template v-slot="{ row }">
  <span v-if="index == 0">{{ row.name }}</span>
  <span v-if="index == 1">{{ row.age }}</span>
  <img v-if="index == 2" :src="row.url" alt="" />
  <span v-if="index == 3">{{ row.sex }}</span>
</template>

el-table 放入图片，出现这种问题的两种解决办法

1. 不使用 v-for 遍历出来的 column ，每一个 column 都单独写出来，但如果有100个column怎么办？
2. 使用上面的方法，但如果有100个column，就需要写一百次v-if

---

后续更新，以下方法可行

<template v-slot="{ row }" v-if="index==2||index==3">
  <img v-if="index==2"  :src="row.url" alt="" />
  <img v-else-if="index==3">
</template>