美文网首页
el-table-column v-if条件渲染报错h.$sco

el-table-column v-if条件渲染报错h.$sco

作者: 爱喝咖啡的攻城狮 | 来源:发表于2020-06-17 00:01 被阅读0次

    问题:项目中遇到el-table-column条件渲染出现报错的情况

               报错内容: h.$scopedSlots.default is not a function

    error

    原因:表格是element-ui通过循环产生的,而vue在dom重新渲染时有一个性能优化机制,就是相同dom会被复用,这就是问题所在,所以,通过key去标识一下当前行是唯一的,不许复用,就行了。

    解决:添加 :key="Math.random()"

    example:

    <el-table-column fixed="right" label="操作" width="200" :key="Math.random()"  v-if="currentTab === 'xxx'">      <template slot-scope="{row}"> 

             <el-button type="text" size="small">查看详情</el-button> 

             <el-button type="text" size="small">编辑</el-button> 

        </template> 

     </el-table-column>

    相关文章

      网友评论

          本文标题:el-table-column v-if条件渲染报错h.$sco

          本文链接:https://www.haomeiwen.com/subject/gtndxktx.html