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

公衆号位址