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來解決

公衆號地址