快捷導(dǎo)航

element-ui表格如何自適應(yīng)高度效果示例

更新時間：2023年08月03日 11:35:51 作者：檸檬加?xùn)?

這篇文章主要給大家介紹了關(guān)于element-ui表格如何自適應(yīng)高度的相關(guān)資料,Element UI的Table組件默認情況下是沒有自適應(yīng)高度的,文中給大家介紹了解決的辦法,需要的朋友可以參考下

1、el-table增加max-height屬性

<el-table :max-height="tableHeight" ref="queryForm">

2、data增加tableHeight變量

data() {
  return {
      // 表格高度
      tableHeight: 200,
  }
};

3、mounted獲取計算高度，每次需要刷新頁面才能自適應(yīng)

mounted() {
  this.$nextTick(() => {
    // window.innerHeight 瀏覽器窗口的可見高度，下面的 220 是除了table最大高度的剩余空間。
    let height = window.innerHeight - this.$refs.queryForm.$el.offsetHeight - 220;
    this.tableHeight = height;
  })
},

雖然這時候，已經(jīng)可以根據(jù)窗體大小，高度動態(tài)變化，但是，還要每次刷新才行……

所以，我們需要加一個監(jiān)聽器即可，監(jiān)聽窗體大小變化，一旦變化就執(zhí)行方法重新設(shè)定tableHeight

methods: {
    getHeight() {
      this.$nextTick(() => {
        // window.innerHeight 瀏覽器窗口的可見高度，下面的 220 是除了table最大高度的剩余空間。
        console.log(1111,window.innerHeight);
        let height = window.innerHeight - this.$refs.queryForm.$el.offsetHeight - 220;
        this.tableHeight = height;
      })
    }
  },
  created() {
    window.addEventListener('resize', this.getHeight)
  },
 //可有可無
destroyed () {
    window.removeEventListener('resize', this.getHeight)
  }

這里還有個需要注意的地方，就是修改下el-table的css，否則table會有很多留白，看起來體驗不是很好

這里使用了::v-deep ，否則我們是修改不了 element自帶的樣式。

::v-deep .el-table {
  .el-table__body {
    height: 100%;
  }
}

自此，就能達到table高度自適應(yīng)的效果啦~~，拖拽可視窗口高度時，表格在實時更新數(shù)據(jù)會出現(xiàn)抖動

補充知識：element ui table組件高度筆記本和臺式顯示不同

這種情況可能是因為筆記本和臺式的分辨率不同，導(dǎo)致元素的大小顯示不同。您可以通過設(shè)置表格組件的高度為固定值或百分比來解決此問題，以適應(yīng)不同的設(shè)備。

例如，您可以使用以下 CSS 樣式來設(shè)置表格組件的高度為 500 像素：

.el-table {
  height: 500px;
}

或者使用以下 CSS 樣式將表格組件的高度設(shè)置為頁面高度的 80%：

.el-table {
  height: 80vh;
}

這樣，無論在筆記本還是臺式電腦上，表格組件都會以相同的高度顯示。

總結(jié)

到此這篇關(guān)于element-ui表格如何自適應(yīng)高度的文章就介紹到這了,更多相關(guān)element-ui表格自適應(yīng)高度內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

element-ui表格如何自適應(yīng)高度效果示例

補充知識：element ui table組件高度筆記本和臺式顯示不同

相關(guān)文章

最新評論

大家感興趣的內(nèi)容

最近更新的內(nèi)容

常用在線小工具