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à)值，需要的朋友們下面隨著小編來一起學(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如何通過id從列表頁跳轉(zhuǎn)到對(duì)應(yīng)的詳情頁
這篇文章主要介紹了vue如何通過id從列表頁跳轉(zhuǎn)到對(duì)應(yīng)的詳情頁 ,需要的朋友可以參考下2018-05-05
Vue3中使用mock.js模擬數(shù)據(jù)的示例詳解
前后端同時(shí)開發(fā)的時(shí)候,后端接口數(shù)據(jù)沒有出來,前端可以使用mock模擬假數(shù)據(jù),所以下面小編就來為大家詳細(xì)介紹一下如何在Vue3中使用mock.js模擬數(shù)據(jù)吧2025-03-03
vue3+typescript實(shí)現(xiàn)圖片懶加載插件
這篇文章主要介紹了vue3+typescript實(shí)現(xiàn)圖片懶加載插件，幫助大家更好的理解和使用vue，感興趣的朋友可以了解下2020-10-10
這篇文章主要介紹了在vscode中使用腳手架搭建vue項(xiàng)目的相關(guān)資料,包括創(chuàng)建Vue2和Vue3項(xiàng)目,并展示了如何自定義項(xiàng)目配置,如選擇特性、路由模式、CSS預(yù)處理器和工具配置,通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-12-12
jdk1.8+vue elementui實(shí)現(xiàn)多級(jí)菜單功能
這篇文章主要介紹了jdk1.8+vue elementui實(shí)現(xiàn)多級(jí)菜單功能,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-09-09
這篇文章主要介紹了Vue中的directive指令快速使用，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-10-10
vue項(xiàng)目本地開發(fā)完成后部署到服務(wù)器后報(bào)404錯(cuò)誤解決方案
很多時(shí)候我們發(fā)現(xiàn)辛辛苦苦寫的VueJs應(yīng)用經(jīng)過打包后在自己本地搭建的服務(wù)器上測(cè)試沒有什么問題,但真正放在服務(wù)器上后會(huì)發(fā)現(xiàn)或多或少的問題,這篇文章主要給大家介紹了關(guān)于vue項(xiàng)目本地開發(fā)完成后部署到服務(wù)器后報(bào)404錯(cuò)誤的解決方案,需要的朋友可以參考下2024-01-01
大家應(yīng)該都知道vue是單向數(shù)據(jù)流，一般我們也不會(huì)在子組件里面修改父組件傳進(jìn)來的值，但總有需要修改的時(shí)候，這篇文章主要介紹了vue中修改props傳進(jìn)來的值,需要的朋友可以參考下2022-12-12
使用Vue開發(fā)動(dòng)態(tài)刷新Echarts組件的教程詳解
這篇文章主要介紹了使用Vue開發(fā)動(dòng)態(tài)刷新Echarts組件的教程詳解,需要的朋友可以參考下2018-03-03
這篇文章主要介紹了vue生成token并保存到本地存儲(chǔ)中,本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2018-07-07