mint-ui cell 使用v-if改变icon报错

Question

我想实现一个云盘列表，显示文件夹、xls、pdf、png等文件类型，在用v-for循环cell的时候，加v-if来判断fileType，以此来进一步改变slot里的icon。但是单独在img里修改的时候会报错，说v-else-if必须放在使用了v-if的相邻元素后才可以。不知道该怎么改，求指教orz。
此为页面代码

<mt-index-list>
        <mt-cell v-for="file in fileList" :key="file.fileId" 
                :title="file.fileName" 
                @click.native="change(file.fileName)"  
                label="描述文字">
            <img slot="icon" v-if="file.fileType ==='folder'" style="width:30px;height:30px" src="../../assets/folder.png"/><i class="iconfont icon-arrow-right-copy-copy"></i>
            <img slot="icon" v-else-if="file.fileType ==='xls'" style="width:30px;height:30px" src="../../assets/excel.png"/>
        </mt-cell>
<mt-index-list>

此为返回的数据

fileList:[{
        fileId:'1',
        fileSize:0,
        fileName:'1',
        fileType:'folder'
      },{
        fileId:'2',
        fileSize:0,
        fileName:'2',
        fileType:'doc'
      },{
        fileId:'3',
        fileSize:0,
        fileName:'3',
        fileType:'folder'
      },{
        fileId:'4',
        fileSize:0,
        fileName:'4',
        fileType:'folder'
      },{
        fileId:'5',
        fileSize:0,
        fileName:'5',
        fileType:'folder'
      }],

预期效果

报错内容

也试过将v-if写在mt-cell标签里，但是这样做了后显示如图

还请大神们指点一下该怎么改一下才可以呢

Answer 1

用函数计算，将type传递过去，返回计算出来的icon

---

补充：

你的报错原因主要是这个地方

<img slot="icon" v-if="file.fileType ==='folder'" style="width:30px;height:30px" src="../../assets/folder.png"/>
<i class="iconfont icon-arrow-right-copy-copy"></i>
<img slot="icon" v-else-if="file.fileType ==='xls'" style="width:30px;height:30px" src="../../assets/excel.png"/>

这个i标签紧跟在v-if的img标签的后面，使得v-if的模板解析的时候认为已经结束了，所以会提示你v-else-if必须紧跟在v-if后面。

你可以尝试用

<template v-if="file.fileType ==='folder'">
<img slot="icon"  style="width:30px;height:30px" src="../../assets/folder.png"/>
<i class="iconfont icon-arrow-right-copy-copy"></i>
</template>

替代原来的那个v-if的部分。

我上面提的主要是通过其他的方法，比如你可以单独用一个method计算出src和icon，然后只需要一个标签就可以表示出所有的图片了。
当然，用内联的代码计算出的src比较麻烦，可能需要先import对应的图片，或者计算出class，图片用background-image来引入就行了