vue+elementUI+table高度自适应方法

378 阅读1分钟
<!--dom结构-->
  <template>
    <el-table
      :height="height"
      :data="tableData"
      style="width: 100%">
      <el-table-column prop="date" label="日期" width="180"></el-table-column>
      <el-table-column prop="name" label="姓名" width="180"></el-table-column>
      <el-table-column prop="address" label="地址"></el-table-column>
    </el-table>
  </template>
  <!--方法-->
  <script>
    export default {
      data() {
        return {
          tableData: [{
            date: '2016-05-02',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1518 弄'
          }],
  		  height: 600
        }
      },
  	  mounted () {
        setTimeout(() => {
          this.heightFn()
        }, 0)
        window.onresize = () => {
          this.heightFn()
        }
      },
  	   methods: {
        heightFn () {
          let pageHeight = window.innerHeight
          this.height = (pageHeight > 530 ? pageHeight : 530) - 70
        }
      }
    }
  </script>