elementui表格卡顿

Question

    表格最多也就50条数据，为什么每次切换表格的时候会卡顿两秒左右？如果表格十多条数据就不会卡。如何改进一下









  <el-table :data="curr_data" height="700px" key='setTable' @selection-change="handleSelectionChange" v-else-if='type=="set"'  >
                  <el-table-column type='selection'    fixed></el-table-column>
                  
                <el-table-column v-if='isShowband()'
                  prop="band"
                  label="band"
                  width="100"
                  :filters="[{ text: '', value: '' }, { text: 'bandA', value: 'bandA' }]"
                  :filter-method="filterTag"
                  filter-placement="bottom-end">
                  <template slot-scope="scope">
                    <el-tag disable-transitions>{{scope.row.band}}</el-tag>
                  </template>
                </el-table-column>
                <el-table-column prop="name" label="name"  >
                </el-table-column>
                <el-table-column  label="value" >
                    <template slot-scope="scope">
                          <el-select  v-if='scope.row.type==7&&scope.row.enum!=-1' v-model="scope.row.dataValue" @change='changeSelect()'>
                            <el-option
                              v-for="(item,index) in enumArr[scope.row.enum]"
                              :key="item"
                              :label="item"
                              :value="index">
                            </el-option>
                          </el-select> 
                        <el-input v-model="scope.row.dataValue" v-else></el-input>
                    </template>
                </el-table-column>
                <el-table-column prop="unit"  >
                </el-table-column>    
                <el-table-column >

                    <template slot-scope="scope">
                        <span v-if='scope.row.error=="0"' style='color:green '>Success</span>
                        <span v-else-if='scope.row.error==" "'></span>
                        <span v-else style='color:red '>Error</span>
                    </template>
                    
                </el-table-column>
              </el-table>

Answer 1

不要用 :key="item"，应该用key为一个唯一的值，这样会使vue更好的重用dom，减少重绘，可能会解决你的卡顿问题。

Answer 2

解决了吗，我现在也很卡

Answer 3

https://github.com/livelyPeng... 完美解决万级数据渲染卡顿问题，流畅渲染万级数据并不会影响到element el-table的原有功能