vue - template 導致 slot 無效

template 導致 slot 無效

無效

<el-upload>
      <template  v-if="showFileList">
        <i slot="default" class="el-icon-plus"></i>
        <div slot="file" slot-scope="{file}">
          ...
        </div>
      </template>
      <template v-else>
        ...
      </template>
    </el-upload>

修復

<el-upload>
      <i v-if="showFileList" slot="default" class="el-icon-plus"></i>
      <div v-if="showFileList" slot="file" slot-scope="{file}">
        <img
          v-if="isImage(file)"
          class="el-upload-list__item-thumbnail"
          :src="'https://images.cnblogs.com/cnblogs_com/zc-lee/2003100/o_210721071911%E7%81%AB%E8%BD%A6.png'"
          alt
        />
        <video
          v-else-if="isVideo(file)"
          class="el-upload-list__item-thumbnail"
          :src="file.url"
          alt
        />
        <span v-else class="el-upload-list__item-thumbnail">{{ file.name }}</span>
        <!-- <span class="el-upload-list__item-thumbnail">{{ file.name }}</span> -->
        <span v-if="showActions(file)" class="el-upload-list__item-actions">
          <span class="el-upload-list__item-preview" @click="handlePictureCardPreview(file)">
            <i class="el-icon-zoom-in"></i>
          </span>
          <span v-if="!disabled" class="el-upload-list__item-delete" @click="handleRemove(file)">
            <i class="el-icon-delete"></i>
          </span>
        </span>
      </div>
      <template v-else>
        ...
      </template>
    </el-upload>