element的el-table-column中有v-if是有solt失效

Posted ll15888

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了element的el-table-column中有v-if是有solt失效相关的知识,希望对你有一定的参考价值。

理想这样

技术图片

 

 

显示是这样

 

 

 技术图片

技术图片

 

 slot失效了

显示的是prop的值

技术图片

 

 解决:

需要在其和其之后的一个显示的组件上添加 :key="Math.random()"

技术图片

 

 技术图片

 

 完美搞定

 

 

原因:

是因为表格是element-ui通过循环产生的

而vue在dom重新渲染时有一个性能优化机制,

就是相同dom会被复用,

通过key去标识一下当前行是唯一的,不许复用,就行了。

以上是关于element的el-table-column中有v-if是有solt失效的主要内容,如果未能解决你的问题,请参考以下文章

Element中在<el-table-column>中的方法执行两次

vue-element动态渲染表头(el-table-column)

el-table-column怎么过滤掉不需要的内容

vue.js+element中标签,<el-table-column>标签怎样给这个标签在js中设置颜色属性;

如何在表格中添加图片(使用el-table、el-table-column),即在Vue.js中使用ui-element?

Vue --自定义el-table-column头部的两种方法