vue2设置el-table自适应高度

• 表格属性和样式：

<el-table
highlight-current-row
:data="PlannedData"
style="width: 100%"
:header-cell-style="tableHeaderCellStyle"
:cell-style="tableCellStyle"
@sort-change="handleSortChange"
:max-height="tableHeight"
>

• highlight-current-row: 表示高亮当前行。
• :data="PlannedData": 表示表格的数据来源，其中PlannedData是数据的变量名。
• style="width: 100%": 设置表格宽度为100%。
• :header-cell-style="tableHeaderCellStyle": 设置表头单元格的样式。
• :cell-style="tableCellStyle": 设置表格内容单元格的样式。
• @sort-change="handleSortChange": 监听表格排序变化，触发handleSortChange方法。
• :max-height="tableHeight": 设置表格的最大高度

 

• 窗口大小变化监听和表格高度计算：

data() {
return {
  tableHeight: this.calculateTableHeight(), // 初始化表格高度
};
},
mounted() {
// 监听窗口大小变化，实时更新表格高度
window.addEventListener('resize', this.handleResize);
},
methods: {
handleResize() {
  // 窗口大小变化时重新计算表格高度
  this.tableHeight = this.calculateTableHeight();
},
calculateTableHeight() {
  // 根据实际需求计算表格高度
  return window.innerHeight - 25;
},
},
destroyed() {
// 组件销毁时移除事件监听
window.removeEventListener('resize', this.handleResize);
},

• tableHeight: 表示表格的高度，通过calculateTableHeight方法计算得到，并在组件初始化时进行了初始化。
• mounted生命周期中，添加了窗口大小变化事件监听器，当窗口大小变化时，调用handleResize方法重新计算表格高度。
• calculateTableHeight方法根据实际需求计算表格高度，这里是将窗口高度减去一个固定值（25）根据实际效果填写值
• 表格样式

computed: {
tableHeaderCellStyle() {
  return {
  color: '#000',
  fontSize: '12px',
  fontFamily: '微软雅黑',
  textAlign: 'center',
  padding: 0,
  margin: 0,
  };
},
tableCellStyle() {
  return {
  fontSize: '11px',
  textAlign: 'center',
  padding: 0,
  margin: 0,
  };
},
},

• 通过computed属性计算了两个样式对象，分别用于表头和表格内容的样式设置。
• 组件销毁时移除事件监听

destroyed() {
// 组件销毁时移除事件监听
window.removeEventListener('resize', this.handleResize);
}