Vue
会尽量高效地渲染元素,一般会复用已有元素而不是从头开始渲染。
这样也不老是符合实际需求,因此 Vue 为你提供了一种方式来表达“这两个元素是彻底独立的,不要复用它们”。只需添加一个具备惟一值的key
属性便可。见详情html
错误代码vue
<!-- 代码块1 --> <el-table-column label="授信申请状态" v-if="type"> <template slot-scope="scope">{{ scope.row.data2 | format }}</template> </el-table-column> <!-- 代码块2 --> <el-table-column prop="data1" label="联系人手机" v-else></el-table-column>
报错分析git
若是优先显示代码块1,而后改变type值,显示代码块2,这时Vue为了快速渲染页面,会优先拿代码1的代码渲染到代码块2的位置,可是代码块2并无定义 slot-scope
,这时就会报标题错误。ide
解决方案gitlab
v-if
和 v-else
的地方加上 key
v-if
和 v-else
换成 v-show
我的博客:午后南杂ui