element中table高度自適應(yīng)的實(shí)現(xiàn)
更新時(shí)間：2020年10月21日 10:35:08 作者：灰太狼的情與殤
這篇文章主要介紹了element中table高度自適應(yīng)的實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
1.開發(fā)環(huán)境 vue+element
2.電腦系統(tǒng) windows10專業(yè)版
3.在開發(fā)的過程中,我們經(jīng)常會(huì)使用到 element中的table,但是我們也發(fā)現(xiàn)了在table的配置中,只能設(shè)置 具體的高度不能設(shè)置百分比,怎么實(shí)現(xiàn)table高度自適應(yīng)呢?方法如下:
4.在對(duì)應(yīng)的vue模板中添加如下代碼:
<el-table
:data="tableData"
row-key="id"
sortable
style="width: 96%"
:height="taheight"
default-expand-all
>
</el-table>
5.在 return 中添加如下代碼:
taheight:"90%",
6.在mounted中添加如下代碼:
_Dchen.$nextTick(() => {
this.taheight = (window.innerHeight-this.ttaheight/2)+"%";
})
7.效果圖如下:
到此這篇關(guān)于element中table高度自適應(yīng)的實(shí)現(xiàn)的文章就介紹到這了,更多相關(guān)element table高度自適應(yīng)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了vue快捷鍵與基礎(chǔ)指令詳解,需要的朋友可以參考下2017-06-06
這篇文章主要介紹了vue中使用mockjs配置和使用方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
vue中改變選中當(dāng)前項(xiàng)的顯示隱藏或者狀態(tài)的實(shí)現(xiàn)方法
下面小編就為大家分享一篇vue中改變選中當(dāng)前項(xiàng)的顯示隱藏或者狀態(tài)的實(shí)現(xiàn)方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來(lái)看看吧2018-02-02
vue實(shí)現(xiàn)垂直無(wú)限滑動(dòng)日歷組件
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)垂直無(wú)限滑動(dòng)日歷組件，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-04-04
Vue+SpringBoot開發(fā)V部落博客管理平臺(tái)
V部落是一個(gè)多用戶博客管理平臺(tái)。這篇文章主要介紹了Vue+SpringBoot開發(fā)V部落博客管理平臺(tái),需要的朋友可以參考下2017-12-12
詳解Vue Elementui中的Tag與頁(yè)面其它元素相互交互的兩三事
這篇文章主要介紹了詳解Vue Elementui中的Tag與頁(yè)面其它元素相互交互的兩三事,小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來(lái)看看吧2018-09-09
在本篇文章里小編給大家分享了關(guān)于VUE中使用MUI方法和步驟，有需要的朋友們可以學(xué)習(xí)參考下。2019-02-02
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)搜索小功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-11-11
淺析vue-router jquery和params傳參(接收參數(shù))$router $route的區(qū)別
今天做項(xiàng)目時(shí)踩到了vue-router傳參的坑（jquery和params），所以決定總結(jié)一下二者的區(qū)別。感興趣的朋友跟隨腳本之家小編一起看看吧2018-08-08
詳解Vue+elementUI build打包部署后字體圖標(biāo)丟失問題
這篇文章主要介紹了詳解Vue+elementUI build打包部署后字體圖標(biāo)丟失問題，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-07-07