VUE2.0 ElementUI2.0表格el-table自適應(yīng)高度的實(shí)現(xiàn)方法

更新時(shí)間：2018年11月28日 14:54:57 作者：River_mx

在開(kāi)發(fā)中，需要表格控件根據(jù)瀏覽器高度進(jìn)行調(diào)整，固定表頭，本文主要介紹了VUE2.0 ElementUI2.0表格el-table自適應(yīng)高度的實(shí)現(xiàn)方法，非常具有實(shí)用價(jià)值，需要的朋友可以參考下

在開(kāi)發(fā)中，需要表格控件根據(jù)瀏覽器高度進(jìn)行調(diào)整，固定表頭，且然后多余的出滾動(dòng)條，官方給出的：

只要在el-table元素中定義了height屬性，即可實(shí)現(xiàn)固定表頭的表格，而不需要額外的代碼。

然后直接上template代碼：

<template>
 <el-table
  :data="tableData3"
  height="250"
  border
  style="width: 100%">
  <el-table-column
   prop="date"
   label="日期"
   width="180">
  </el-table-column>
 </el-table>
</template>

其中height="250"是固定值，我們可以在data中設(shè)置一個(gè)tableHeight，其中x是根據(jù)你布局自己算出來(lái)的值，也可以換成動(dòng)態(tài)監(jiān)測(cè)的值，就是父級(jí)到body的值，這個(gè)可以自行添加

data(){
 return{
  tableHeight: window.innerHeight - x
 }
}

template中：

<template>
 <el-table
  :data="tableData3"
  :height="tableHeight"
  border
  style="width: 100%">
  <el-table-column
   prop="date"
   label="日期"
   width="180">
  </el-table-column>
 </el-table>
</template>

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

vue 手機(jī)物理監(jiān)聽(tīng)鍵+退出提示代碼
這篇文章主要介紹了vue 手機(jī)物理監(jiān)聽(tīng)鍵+退出提示代碼，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2020-09-09
vue快捷鍵與基礎(chǔ)指令詳解
這篇文章主要介紹了vue快捷鍵與基礎(chǔ)指令詳解,需要的朋友可以參考下
2017-06-06
vue實(shí)現(xiàn)兄弟組件之間跳轉(zhuǎn)指定tab標(biāo)簽頁(yè)
這篇文章主要介紹了vue實(shí)現(xiàn)兄弟組件之間跳轉(zhuǎn)指定tab標(biāo)簽頁(yè)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-05-05
Vue SPA 首屏優(yōu)化方案
這篇文章主要介紹了Vue SPA 首屏優(yōu)化方案的的相關(guān)資料，幫助大家更好的理解和學(xué)習(xí)使用vue，感興趣的朋友可以了解下
2021-02-02
vue實(shí)現(xiàn)全匹配搜索列表內(nèi)容
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)全匹配搜索列表內(nèi)容，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2019-09-09
vue 實(shí)現(xiàn)click同時(shí)傳入事件對(duì)象和自定義參數(shù)
這篇文章主要介紹了vue 實(shí)現(xiàn)click同時(shí)傳入事件對(duì)象和自定義參數(shù)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2021-01-01
在Vue項(xiàng)目中引入騰訊驗(yàn)證碼服務(wù)的教程
這篇文章主要介紹了在Vue項(xiàng)目中引入騰訊驗(yàn)證碼服務(wù)的教程,需要的朋友可以參考下
2018-04-04
詳解Vue的七種傳值方式
這篇文章主要介紹了Vue的七種傳值方式,本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2021-02-02
vue虛擬滾動(dòng)性能優(yōu)化方式詳解
這篇文章主要為大家介紹了vue虛擬滾動(dòng)性能優(yōu)化方式詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2022-08-08
vue3中el-uplod結(jié)合ts實(shí)現(xiàn)圖片粘貼上傳
本文主要介紹了vue3中el-uplod結(jié)合ts實(shí)現(xiàn)圖片粘貼上傳,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2024-07-07