element中table高度自適應(yīng)的實現(xiàn)
更新時間：2020年10月21日 10:35:08 作者：灰太狼的情與殤
這篇文章主要介紹了element中table高度自適應(yīng)的實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
1.開發(fā)環(huán)境 vue+element
2.電腦系統(tǒng) windows10專業(yè)版
3.在開發(fā)的過程中,我們經(jīng)常會使用到 element中的table,但是我們也發(fā)現(xiàn)了在table的配置中,只能設(shè)置 具體的高度不能設(shè)置百分比,怎么實現(xiàn)table高度自適應(yīng)呢?方法如下:
4.在對應(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)的實現(xiàn)的文章就介紹到這了,更多相關(guān)element table高度自適應(yīng)內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
vue如何通過id從列表頁跳轉(zhuǎn)到對應(yīng)的詳情頁
這篇文章主要介紹了vue如何通過id從列表頁跳轉(zhuǎn)到對應(yīng)的詳情頁 ,需要的朋友可以參考下2018-05-05
Vue3中使用mock.js模擬數(shù)據(jù)的示例詳解
前后端同時開發(fā)的時候,后端接口數(shù)據(jù)沒有出來,前端可以使用mock模擬假數(shù)據(jù),所以下面小編就來為大家詳細介紹一下如何在Vue3中使用mock.js模擬數(shù)據(jù)吧2025-03-03
vue3+typescript實現(xiàn)圖片懶加載插件
這篇文章主要介紹了vue3+typescript實現(xiàn)圖片懶加載插件，幫助大家更好的理解和使用vue，感興趣的朋友可以了解下2020-10-10
這篇文章主要介紹了在vscode中使用腳手架搭建vue項目的相關(guān)資料,包括創(chuàng)建Vue2和Vue3項目,并展示了如何自定義項目配置,如選擇特性、路由模式、CSS預(yù)處理器和工具配置,通過代碼介紹的非常詳細,需要的朋友可以參考下2024-12-12
jdk1.8+vue elementui實現(xiàn)多級菜單功能
這篇文章主要介紹了jdk1.8+vue elementui實現(xiàn)多級菜單功能,本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2020-09-09
這篇文章主要介紹了Vue中的directive指令快速使用，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-10-10
vue項目本地開發(fā)完成后部署到服務(wù)器后報404錯誤解決方案
很多時候我們發(fā)現(xiàn)辛辛苦苦寫的VueJs應(yīng)用經(jīng)過打包后在自己本地搭建的服務(wù)器上測試沒有什么問題,但真正放在服務(wù)器上后會發(fā)現(xiàn)或多或少的問題,這篇文章主要給大家介紹了關(guān)于vue項目本地開發(fā)完成后部署到服務(wù)器后報404錯誤的解決方案,需要的朋友可以參考下2024-01-01
大家應(yīng)該都知道vue是單向數(shù)據(jù)流，一般我們也不會在子組件里面修改父組件傳進來的值，但總有需要修改的時候，這篇文章主要介紹了vue中修改props傳進來的值,需要的朋友可以參考下2022-12-12
使用Vue開發(fā)動態(tài)刷新Echarts組件的教程詳解
這篇文章主要介紹了使用Vue開發(fā)動態(tài)刷新Echarts組件的教程詳解,需要的朋友可以參考下2018-03-03
這篇文章主要介紹了vue生成token并保存到本地存儲中,本文給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友可以參考下2018-07-07