luanhewei

Vue 会尽可能高效地渲染元素,通常会复用已有元素而不是从头开始渲染。

这样也不总是符合实际需求,所以 Vue 为你提供了一种方式来表达“这两个元素是完全独立的,不要复用它们”。只需添加一个具有唯一值的 key 属性即可。见详情

错误代码

<!-- 代码块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>

报错分析

如果优先显示代码块1,然后改变type值,显示代码块2,这时Vue为了快速渲染页面,会优先拿代码1的代码渲染到代码块2的位置,但是代码块2并没有定义 slot-scope ,这时就会报标题错误。

解决方案

  1. 给使用 v-ifv-else 的地方加上 key
  2. v-ifv-else 换成 v-show

个人博客:午后南杂

相关文章:

  • 2022-12-23
  • 2021-12-23
  • 2022-12-23
  • 2021-05-23
  • 2021-06-16
  • 2022-12-23
  • 2022-12-23
猜你喜欢
  • 2022-12-23
  • 2021-10-20
  • 2021-04-03
  • 2021-08-25
  • 2022-12-23
  • 2022-01-18
  • 2022-01-23
  • 2022-12-23
相关资源
相似解决方案