• Ajax
  • Ant design
  • Axios-Fetch
  • Avue
  • Browser
  • Canvas
  • CSS
  • Dos-bat
  • Dva
  • Dedecms
  • Echart
  • ElementUI
  • Editors
  • Git
  • GeoServer
  • GIS
  • H5
  • Jquery
  • Java安卓
  • Json
  • Javascript
  • Leaflet
  • Linux
  • Life-Info
  • Mock
  • MongoDB
  • Network
  • NodeJS
  • NPM
  • React
  • 设计运营
  • SEO
  • SVG
  • TypeScript
  • Tools
  • umi
  • uni-APP
  • Vant
  • Vue
  • Windows
  • webpack
  • 位置:OC中文网 > 其他 > ElementUI >

    el-table根据浏览器动态设置高度

    来源:openlayers-cesium.com 时间:08-11

     

    Vue+Element-UI根据浏览器大小动态设置el-table的高度.

    效果:

     
     

    示例代码

    1. <template> 
    2.     <lls-table 
    3.       :data="tableData" 
    4.       :height="tableHeight"> 
    5.     </llst-bale> 
    6. </template> 
    7. export default { 
    8.     data () { 
    9.         return { 
    10.             tableHeight: window.innerHeight - 340, tableData:[]
    11.         } 
    12.     }, 
    13.     created () { 
    14.         window.addEventListener('resize', this.getTableHeight) 
    15.     }, 
    16.     destroyed () { 
    17.         window.removeEventListener('resize', this.getTableHeight) 
    18.     }, 
    19.     methods () { 
    20.         getTableHeight () { 
    21.           this.tableHeight = window.innerHeight - 340 
    22.         }, 
    23.     },