欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時(shí)間：2018年11月28日 14:54:57   作者：River_mx  
在開發(fā)中，需要表格控件根據(jù)瀏覽器高度進(jìn)行調(diào)整，固定表頭，本文主要介紹了VUE2.0 ElementUI2.0表格el-table自適應(yīng)高度的實(shí)現(xiàn)方法，非常具有實(shí)用價(jià)值，需要的朋友可以參考下

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

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

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>

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

相關(guān)文章

最新評(píng)論