一、问题描述以及产生原因

  • 问题描述:当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) 
  }
}
Logo

魔乐社区(Modelers.cn) 是一个中立、公益的人工智能社区,提供人工智能工具、模型、数据的托管、展示与应用协同服务,为人工智能开发及爱好者搭建开放的学习交流平台。社区通过理事会方式运作,由全产业链共同建设、共同运营、共同享有,推动国产AI生态繁荣发展。

更多推荐