element-ui table高度根据数据条数自适应

“我正在参加「掘金·启航计划」”

前言

在 element-ui 官网中有这样一句描述：“el-table元素中定义了height属性，即可实现固定表头的表格，而不需要额外的代码”。但这个高度是一个固定值，实际场景往往需要一个更为灵活的高度，如是乎我就写了一个根据数据条数自适应高度的表格（代码里的像素值，需要根据自己项目实际效果进行对应的调整哦！！！）：

1. 无数据或总条数小于5条数时，表格展示4条的高度；
2. 分页器10条/页，有多少条展示多少的高度，最大高度为10条；
3. 分页器15条/页，有多少条展示多少的高度，最大高度为15条。

// 混入js
export default {
  data() {
    return {
      tableAutoHeight: '218px'
    }
  },
  methods: {
    getTableAutoHeight(total, pageSize, showSummary) { // total: 总条数  pageSize：每一页多少条 showSummary：是否显示合计行
      if (total < 5) {
        this.tableAutoHeight = showSummary ? '263px' : '218px'
      } else if (total > 15) {
        this.tableAutoHeight = pageSize === 10 ? (showSummary ? '515px' : '470px') : (showSummary ? '715px' : '670px')
      } else if (total > 4 && total <= 15) {
        if (total > 9) {
          this.tableAutoHeight = pageSize === 10 ? (showSummary ? '515px' : '470px') : (showSummary ? ((total + 1)*40 + 75 + 'px') : ((total + 1)*40 + 30 + 'px')) // 40 代表表格每行的高度为 40px
        } else {
          this.tableAutoHeight = showSummary ? ((total + 1)*40 + 75 + 'px') : ((total + 1)*40 + 30 + 'px')
        }
      }
    }
  }
}

// 主体界面
<el-table :data="tableData" :height="tableAutoHeight">
// 接口调用拿到表格数据之后执行
this.getTableAutoHeight(this.total, this.pageSize, true)

最终呈现效果：