Vue+Element UI实现El-Table根据浏览器大小动态调整高度，轻松实现自适应效果

2024-01-08 23:39:18

在Vue中使用Element UI实现El-Table自适应高度的步骤：

安装Element UI组件库
```
npm install element-ui
```

在Vue项目中引入Element UI

在Vue项目中的main.js文件中，添加以下代码：

import Vue from 'vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

Vue.use(ElementUI)

使用El-Table组件

在Vue组件中，使用El-Table组件来创建表格，并设置其height属性为动态变量tableHeight，以便根据浏览器大小动态调整表格高度。
```
<el-table :height="tableHeight" ... >
  ...
</el-table>
```

定义表格渲染数据及所需变量

在Vue组件中，定义表格渲染数据和所需变量，包括tableHeight变量，并初始化其值。

export default {
  data() {
    return {
      tableData: [
        ...
      ],
      tableHeight: null
    }
  },
  ...
}

监听内容区域高度screenHeight

使用Vue的mounted钩子函数，在组件挂载后监听内容区域高度screenHeight。

mounted() {
  this.screenHeight = document.body.clientHeight
  window.addEventListener('resize', this.handleResize)
},
...

处理窗口大小改变事件

在Vue组件中，定义一个名为handleResize的方法，并在窗口大小改变时调用该方法来动态计算并更新tableHeight的值。
```
methods: {
  handleResize() {
    this.screenHeight = document.body.clientHeight
    this.tableHeight = this.screenHeight - 100
  }
},
...
```
在销毁组件时移除事件监听

在组件销毁时，移除对窗口大小改变事件的监听。
```
beforeDestroy() {
  window.removeEventListener('resize', this.handleResize)
}
```

示例代码

<template>
  <div>
    <el-table :height="tableHeight" ... >
      ...
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        ...
      ],
      tableHeight: null
    }
  },
  mounted() {
    this.screenHeight = document.body.clientHeight
    window.addEventListener('resize', this.handleResize)
  },
  methods: {
    handleResize() {
      this.screenHeight = document.body.clientHeight
      this.tableHeight = this.screenHeight - 100
    }
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.handleResize)
  }
}
</script>