elementui的table與自適應高度

element官方文檔中的table高度都是用的

height="250"

來定義了table固定高度，實際中很多時候我們需要使表格來自適應某個div，所以height一般不能讓它為一個固定高度，下面看代碼

<div ref="tableCot">
    <el-table
    :data="tableData"
    style="width: 100%"
    :height="Height">
    <el-table-column
      fixed
      prop="date"
      label="日期"
      width="150">
    </el-table-column>
    <el-table-column
      prop="name"
      label="姓名"
      width="120">
    </el-table-column>
    <el-table-column
      prop="province"
      label="省份"
      width="120">
    </el-table-column>
    <el-table-column
      prop="city"
      label="市區"
      width="120">
    </el-table-column>
  </el-table>
</div>

需要注意的是定義一個Height與高度綁定，然后是script中的操作

在data里面先定義一個Height

data（）{
  return{
        Height:250
    }  
}

mounted () {
    const that = this
    window.onresize = () => {
      return (() => {
        let heightStyle = that.$refs.tableCot.offsetHeight
        that.Height = heightStyle
      })()
    }
  },

created () {
    let that = this
    let heightStyle = that.$refs.tableCot.offsetHeight
    that.Height = heightStyle
  },

就OK了這里監聽的div變化是windows窗口的變化，如果某些操作會使tableCot大小發生變化，那需要在那個事件上加上

let heightStyle = that.$refs.tableCot.offsetHeight
this.Height = heightStyle