element Table组件固定表头且高度自适应

问题

element是vue功能比较全的后台管理系统UI，可是已经不维护了，在一些细节上仍是有一点问题，项目中遇到一点问题，以下图：

当出现横向滚动条的时候，滚动条在下方，向右滑动的时候表头就看不到了

解决方案

一、出现超宽和超高的列有多是某个单元框文字太多

能够加一个 :show-overflow-tooltip="true"，超宽之后就会显示...，而后会加一个hover的tips
复制代码

二、Table组件提供了一个height属性，当加上这个属性，表头就固定住了

可是这个高度是固定的，遇到分辨率不同的屏幕就会效果不同

由于高度是固定的，当遇到只有一条数据的会出现下面大量留白的状况

最终解决方案

一、当表格的body高于视图高度时

tableHeight = 获取视图的高度 - 可滑动的高度 - 视图内其余的高度
复制代码

二、当表格的body不高于视图高度时

tableHeight = .el-table__body的高度 + .el-table__header的高度
复制代码

三、当没有数据的时候

tableHeight = null
复制代码

代码

封装一个方法放设置高度的function

/**
 * @author Wujy
 * @date 2020/11/10
 * @Description: 设置table的固定滚筒条
*/
export function setHeight() {
  const offsetTop = window.innerHeight - this.$refs.table.$el.offsetTop - 210
  const offsetBodyHeight = document.querySelector('.el-table__body').offsetHeight
  console.log(offsetTop, offsetBodyHeight)
  if (this.tableList.length && offsetBodyHeight < offsetTop) {
    this.tableHeight = offsetBodyHeight + 75
  } else if (!this.tableList.length) {
    this.tableHeight = null
  } else {
    this.tableHeight = offsetTop
  }
}
复制代码

页面的业务代码，在initTable来操做方便处理

initTable() { // table列表查询
  getList(this.searchParams).then(res => {
    if (res.data.list) {
      this.$nextTick(() => {
        setHeight.call(this)
      })
      this.tableList = res.data.list
    }
  }).catch(err => {
  })
},
复制代码

最后效果

写在最后

除了这个表格的固定表头功能，对比ant-desgin还有不少不人性化的设计，好比查询列表上面的超宽隐藏，也须要本身来处理一下

能够用element提供的Collapse来解决

公众号地址