表格表头固定，超过一定高度，除表头部分显示滚动条(Vue)

// 表头固定，超过一定高度，table除表头部分外显示滚动条
<template>
<div>
<table>
  <thead :class="dataHeight > 400 ? 'thead' : '']">
        <tr class="bgtit">
            <th width="18%">A</th>
            <th width="22%">B</th>
            <th width="22%">C</th>
            <th width="18%">D</th>
            <th width="20%">E</th>
        </tr>
    </thead>
    <tbody ref="table" :class="[dataHeight > 400 ? 'tbody' : '']">
            <td width="18%">A</td>
            <td width="22%">B</td>
            <td width="22%">C</td>
            <td width="18%">D</td>
            <td width="20%">E</td>
    </tbody>
</table>
</div>
</template>

<script>
export default{
    name:'demo',
    data() {
        return {
            dataHeight :0
        }
    },
    watch: {
    allData: function () {
      this.$nextTick(function () {
        console.log(this.$refs.table.offsetHeight);
        this.dataHeight = this.$refs.table.offsetHeight;
      });
    },
  },

}
</script>

<style scoped>
/* 设置滚动属性 */
.initialCondition tbody {
  display: block;
  /* max-height: 150px; */
  /* overflow-y: scroll;   */
}

/*设置头与内容自动对齐*/
.initialCondition table thead,
tbody tr {
  display: table;
  width: 100%;
  table-layout: fixed;
}

/*给滚动条预留宽度*/
.initialCondition table thead {
  /* width: calc( 100% - 0.6em);    */
  background: #eff0f5;
}

.tbody {
  max-height: 350px;
  overflow-y: scroll;
}
.thead {
  width: calc(100% - 0.6em) !important;
}
</style>

参考：table实现头部固定，内容滚动效果