ant design vue table 高度自适应_element Table组件固定表头且高度自适应

问题

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

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

解决方案

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

可以加一个 :show-overflow-tooltip="true"，超宽以后就会显示...，然后会加一个hover的tips
           

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

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

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

最终解决方案

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

tableHeight = 获取视图的高度 - 可滑动的高度 - 视图内其他的高度
           

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

tableHeight = .el-table__body的高度 + .el-table__header的高度
           

3、当没有数据的时候

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来解决

公众号地址