在vue2项目中el-table表格的表头和内容错位问题
一、问题描述以及产生原因
- 问题描述:当
el-table
表格有横向滚动条和纵向滚动条,把横向滚动条拉到最右边,表格的表头会和内容错位(表头和内容列不对齐) - 问题产生原因:在
el-table
有纵向滚动条时,el-table__body-wrapper + 纵向滚动条的宽度是100%,故表格内容区域宽度不足100%,而表头el-table__header-wrapper的宽度仍为100%
,表格内容实际宽度小于表头,因此造成错位
二、解决问题
- 思路:给表格表头的宽度设置和表格内容一样即可
100% - 纵向滚动条宽度
- 代码实现
::v-deep {
.el-table__header-wrapper {
// 这里我设置的纵向滚动条宽度为8px
width: calc(100% - 8px)
}
}
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.dtcms.com/a/56042.html
如若内容造成侵权/违法违规/事实不符,请联系邮箱:809451989@qq.com进行投诉反馈,一经查实,立即删除!