elementui的table与自适应高度

Posted 2020-11-22 daicw

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