el-table遇到的一些坑（列错位，行错位，实现跨页多选）

布局错位的问题

遇到的问题是：后台管理系统中表格的操作列在出现了行错位的问题，如下图， 因为以前的项目中也遇到el-table中渲染出现最下面一列会渲染不全，以及有时候拖拽某一列时会出现列的错位问题，都是通过el-table的doLayout()解决了， 关于doLayout()官方文档如下描述 具体用法就是在获取数据时使用如下代码

// 获取表格数据的时候使用 this.$nextTick(()=>{ this.yongliTableData = res.data this.refs.yonglitable.doLayout() })

以及在app.vue中添加以下样式

<style> body .el-table th.gutter { display: table-cell !important; } body .el-table colgroup.gutter { display: table-cell !important; } </style>

这次居然不行了，此时黑人问号脸… 再后来检查发现，出现这个行错位的问题是我的操作列使用了fixed属性，并且列表里使用了el-tooltip， 解决方法，去除el-tooltip,使用tl-table中的show-overflow-tooltip属性实现当内容过长被隐藏时显示 tooltip的需求 完美解决如下：

跨页多选的实现

现在的情形是，分页数据是每次翻页时发送请求返回的后台数据，现在想实现跨页多选，本来想的自己实现的方法是将选中的行数据存起来，每次请求后判断一下有没有已经选过的数据，有的话，再根据el-table的方法toggleRowSelection进行选中，感觉相当的麻烦，直到在官方文档发发现了这个属性 沃特，这不是我的需求吗？完美解决！！！ 代码如下:

<el-table-column :reserve-selection="true" type="selection" ></el-table-column>

按照人家的要求表格里再加上row-key属性（ID类的属性就可以）。