布局错位的问题
遇到的问题是:后台管理系统中表格的操作列在出现了行错位的问题,如下图,
因为以前的项目中也遇到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类的属性就可以)。