1. 程式人生 > 程式設計 >element中table高度自適應的實現

element中table高度自適應的實現

1.開發環境 vue+element

2.電腦系統 windows10專業版

3.在開發的過程中,我們經常會使用到 element中的table,但是我們也發現了在table的配置中,只能設定 具體的高度不能設定百分比,怎麼實現table高度自適應呢?方法如下:

4.在對應的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.效果圖如下:

element中table高度自適應的實現

到此這篇關於element中table高度自適應的實現的文章就介紹到這了,更多相關element table高度自適應內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們!