VUE2.0 ElementUI2.0表格el-table自適應(yīng)高度的實(shí)現(xiàn)方法
更新時(shí)間：2018年11月28日 14:54:57 作者：River_mx
在開發(fā)中，需要表格控件根據(jù)瀏覽器高度進(jìn)行調(diào)整，固定表頭，本文主要介紹了VUE2.0 ElementUI2.0表格el-table自適應(yīng)高度的實(shí)現(xiàn)方法，非常具有實(shí)用價(jià)值，需要的朋友可以參考下
在開發(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ù)你布局自己算出來的值，也可以換成動(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í)有所幫助，也希望大家多多支持腳本之家。
您可能感興趣的文章:
- vue2+element?ui?中的el-table?選中當(dāng)前行當(dāng)前行變色的實(shí)現(xiàn)代碼
- Vue2+Element-ui實(shí)現(xiàn)el-table表格自適應(yīng)高度的案例
- vue2+elementui的el-table固定列會(huì)遮住橫向滾動(dòng)條及錯(cuò)位問題解決方案
- Vue2 Element el-table多選表格控制選取的思路解讀
- VUE2.0+ElementUI2.0表格el-table循環(huán)動(dòng)態(tài)列渲染的寫法詳解
- vue2.0 + element UI 中 el-table 數(shù)據(jù)導(dǎo)出Excel的方法
- vue2使用el-tag實(shí)現(xiàn)自定義菜單導(dǎo)航標(biāo)簽
- vue2實(shí)現(xiàn)在el-table里插入el-tag的示例代碼
相關(guān)文章
這篇文章主要介紹了vue 手機(jī)物理監(jiān)聽鍵+退出提示代碼，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-09-09
這篇文章主要介紹了vue快捷鍵與基礎(chǔ)指令詳解,需要的朋友可以參考下2017-06-06
vue實(shí)現(xiàn)兄弟組件之間跳轉(zhuǎn)指定tab標(biāo)簽頁
這篇文章主要介紹了vue實(shí)現(xiàn)兄弟組件之間跳轉(zhuǎn)指定tab標(biāo)簽頁，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-05-05
這篇文章主要介紹了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ì)大家有所幫助。一起跟隨小編過來看看吧2021-01-01
在Vue項(xiàng)目中引入騰訊驗(yàn)證碼服務(wù)的教程
這篇文章主要介紹了在Vue項(xiàng)目中引入騰訊驗(yàn)證碼服務(wù)的教程,需要的朋友可以參考下2018-04-04
這篇文章主要介紹了Vue的七種傳值方式,本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2021-02-02
這篇文章主要為大家介紹了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)圖片粘貼上傳,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2024-07-07