解决elementui,table抖动问题,:key=“Math.random()“
element
A Vue.js 2.0 UI Toolkit for Web
项目地址:https://gitcode.com/gh_mirrors/eleme/element
免费下载资源
·
以前开发了一个功能,table的column,可以根据条件if来判断是否显示,于是乎就看网上有个解决办法,是在column上增加个key属性:key="Math.random()",完美的解决了if判断不显示的问题。
可是后来,发现,界面有form表单的列表,input变得越来越卡,输入都是卡顿,优化了好多地方都是无解,最终是因为:key="Math.random()"导致的,因为每次跟新表单的时候,key的随机数会发生变化,导致了组件的渲染,这也是table抖动的原因,解决办法是替换key属性,不要使用随机数来做,改为固定值,例:
<el-table
:data="tableData"
style="width: 100%">
<el-table-column
prop="date"
label="日期"
width="180">
</el-table-column>
<el-table-column
v-for="(item, index) in nameList"
:key="'name' + index"
prop="name"
label="姓名"
width="180">
</el-table-column>
<el-table-column
prop="address"
label="地址">
</el-table-column>
</el-table>
注:千万不用使用:key="Math.random()",否则坑会很多,切记
GitHub 加速计划 / eleme / element
54.06 K
14.63 K
下载
A Vue.js 2.0 UI Toolkit for Web
最近提交(Master分支:3 个月前 )
c345bb45
7 个月前
a07f3a59
* Update transition.md
* Update table.md
* Update transition.md
* Update table.md
* Update transition.md
* Update table.md
* Update table.md
* Update transition.md
* Update popover.md 7 个月前
更多推荐
已为社区贡献2条内容
所有评论(0)