【Vue】设置表格过长的时候出现滚动条，避免超出父组件范围

情况1：在布局中设置

主要是给content添加 overflow-y: auto;

<template>
  <a-layout>
    <a-layout-header class="layout-header"><header-vue/></a-layout-header>
    <a-layout>
      <a-layout-sider class="layout-sider"><aside-vue/></a-layout-sider>
      <a-layout-content class="layout-content"><router-view></router-view></a-layout-content>
    </a-layout>
    <a-layout-footer class="layout-footer"></a-layout-footer>
  </a-layout>
</template>

<script setup>

import HeaderVue from "@/components/back/layout/HeaderVue.vue";
import AsideVue from "@/components/back/layout/AsideVue.vue";
</script>

<style scoped>
.layout-header {
  text-align: left;
  color: #fff;
  height: 64px;
  padding-inline: 50px;
  line-height: 64px;
  background-color: #87b9ff;
}

.layout-content {
  text-align: center;
  min-height: 120px;
  line-height: 120px;
  color: #fff;
  background-color: rgb(243, 255, 249);
  overflow-y: auto;
}

.layout-sider {
  text-align: center;
  line-height: 120px;
  color: #fff;
  background-color: rgba(95, 183, 255, 0.54);
}

.layout-footer {
  text-align: center;
  color: #fff;
  height: 64px;
  background-color: #87b9ff;
}
</style>

如果设置了背景色就不太优雅了。
这个时候可以给组件的最大父元素设置

<template>
  <div class="book-management">

<style scoped>
.book-management {
  padding: 10px;
  box-sizing: border-box;
  background: #fff;
  height: 100%;
  width: 100%;
  overflow: auto;
}

.ant-form-item {
  margin-bottom: 16px;
}
</style>

情况2：针对表格自身设置

https://www.antdv.com/components/table-cn#components-table-demo-fixed-columns

添加:scroll="{ x: 1300, y: 1000 }"

若列头与内容不对齐或出现列重复，请指定固定列的宽度 width。如果指定 width 不生效或出现白色垂直空隙，请尝试建议留一列不设宽度以适应弹性布局，或者检查是否有超长连续字段破坏布局。

建议指定 scroll.x 为大于表格宽度的固定值或百分比。注意，且非固定列宽度之和不要超过 scroll.x

其他

参考资料：https://github.com/ant-design/ant-design/issues/28158

table表格在flex布局下面固定表头后，宽度不会自适应屏幕。尝试给table加上样式，也不能自适应 #28158

解决方案：

.main .content .right{
--    flex: 1;
++    flex: auto;
++    min-width: 0;
  }

https://zhuanlan.zhihu.com/p/509874446

在普通的后台布局中，较好的一种办法应该是，给content的组件的最大父级设置滚动条。
然后再给表格设置:scroll="{ x: '100%' }"