快捷導(dǎo)航

VUE2.0 ElementUI2.0表格el-table自適應(yīng)高度的實現(xiàn)方法

更新時間：2018年11月28日 14:54:57 作者：River_mx

在開發(fā)中，需要表格控件根據(jù)瀏覽器高度進行調(diào)整，固定表頭，本文主要介紹了VUE2.0 ElementUI2.0表格el-table自適應(yīng)高度的實現(xiàn)方法，非常具有實用價值，需要的朋友可以參考下

在開發(fā)中，需要表格控件根據(jù)瀏覽器高度進行調(diào)整，固定表頭，且然后多余的出滾動條，官方給出的：

只要在el-table元素中定義了height屬性，即可實現(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è)置一個tableHeight，其中x是根據(jù)你布局自己算出來的值，也可以換成動態(tài)監(jiān)測的值，就是父級到body的值，這個可以自行添加

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>

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

Vue中使用md5進行數(shù)據(jù)加密的實現(xiàn)方法
在現(xiàn)代Web開發(fā)中,數(shù)據(jù)安全是一個不可忽視的重要環(huán)節(jié),Vue.js作為一個流行的前端框架,不僅提供了強大的數(shù)據(jù)綁定和組件化功能,還支持與各種后端服務(wù)的集成,本文將探討如何在Vue應(yīng)用中使用MD5算法來加密數(shù)據(jù),從而提升應(yīng)用的安全性,需要的朋友可以參考下
2024-10-10
vue實現(xiàn)表格數(shù)據(jù)的增刪改查
這篇文章主要為大家詳細介紹了vue實現(xiàn)表格數(shù)據(jù)的增刪改查，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2017-07-07
vue實現(xiàn)移動端可拖拽式icon圖標(biāo)
這篇文章主要為大家詳細介紹了vue實現(xiàn)移動端可拖拽式icon圖標(biāo)，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2022-03-03
Vue實現(xiàn)可復(fù)用輪播組件的方法
這篇文章主要為大家詳細介紹了Vue實現(xiàn)可復(fù)用輪播組件的方法，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2022-07-07
vue3+ts項目之安裝eslint、prettier和sass的詳細過程
這篇文章主要介紹了vue3+ts項目02-安裝eslint、prettier和sass的詳細過程,在本文講解中需要注意執(zhí)行yarn format會自動格式化css、js、html、json還有markdown代碼，需要的朋友可以參考下
2023-10-10
解決Ant Design Modal內(nèi)嵌Form表單initialValue值不動態(tài)更新問題
這篇文章主要介紹了解決Ant Design Modal內(nèi)嵌Form表單initialValue值不動態(tài)更新問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2020-10-10
Vue3使用全局函數(shù)或變量的2種常用方式代碼
在Vue3項目中需要頻繁使用某一個方法,配置到全局感覺會方便很多,這篇文章主要給大家介紹了關(guān)于Vue3使用全局函數(shù)或變量的2種常用方式,需要的朋友可以參考下
2023-09-09
vue使用this.$message不生效的部分原因及解決方案
這篇文章主要介紹了vue使用this.$message不生效的部分原因及解決方案,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
2023-09-09
webpack+vue-cil 中proxyTable配置接口地址代理操作
這篇文章主要介紹了webpack+vue-cil 中proxyTable配置接口地址代理操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2020-07-07
Vue基礎(chǔ)知識快速入門教程
這篇文章主要介紹了Vue基礎(chǔ)知識快速入門教程,我們可以先學(xué)會用，使用一段時間之后，回頭來熟悉一下Vue框架以及它的特點,需要的朋友可以參考下
2023-05-05