element-ui踩坑记录_element 虚拟表格缺点

1、element-ui在同一个页面放置多个table表格可能会出现一个莫名其妙的BUG，比如说表格布局乱了，不同表格内容相互覆盖，可以给el-table标签绑定 :key="Math.random()"解决问题。

<el-table  :key="Math.random()"></el-table>
1

key 的特殊属性主要用在 Vue 的虚拟 DOM 算法，在新旧 nodes 对比时辨识 VNodes。如果不使用 key，Vue 会使用一种最大限度减少动态元素并且尽可能的尝试修复/再利用相同类型元素的算法。
另外使用了图片懒加载的时候，假如列表发生变化而图片没刷新的话，也可以尝试动态绑定key值。

2、element-ui表格在火狐浏览器可能会出现边框不显示的问题（不是一定会出现，有很小几率，但是碰上了就很烦），原因是element-ui给table标签设置了border-collapse：collapse；因此表格边框被合并了。写个样式border-collapse：separate；覆盖之即可；

.gladSo_table /deep/ table {
    border-collapse: separate;
 }
1
2
3

3、当element-ui的多选框组和分页同时使用时，在切换分页时页面重新渲染，会清除掉前一页选中的数据。可以不在el-checkbox-group绑定change事件，取而代之的在el-checkbox里绑定change事件，使用$event传递当前操作是勾选还是去勾选。

<el-checkbox-group v-model="classList">
    <el-checkbox
      v-for="(item, index) in classData"
      :label="item.id"
      @change="classDataChange($event, item)"
      :key="index"
    >{{ item.name }}</el-checkbox>
  </el-checkbox-group>
1
2
3
4
5
6
7
8