以前开发了一个功能,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 个月前
Logo

旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。

更多推荐