在Vue3 使用 element-plus 、 splitpanes 和 el-tab 把界面分成上下部分布局，并且支持 内容超过 进行滚动，且 滚动时候tabs的标题栏不会滚动

在做系统时候，我们经常需要使用到上下布局，最终需要的效果如下图：

 实现如上面效果，需要使用到开源组件 splitpanes ，地址：Splitpanes

 代码具体实现过程如下，先引用 组件

import { Splitpanes, Pane } from 'splitpanes'

import 'splitpanes/dist/splitpanes.css'

 接着写代码

    <splitpanes
      class="default-theme"
      horizontal
      style="height: 100%; padding: 10px 0px 0px; margin-bottom: 0px"
    >
      <pane :size="100 - paneSize">
        <el-tabs v-model="activeName" type="border-card" style="height: 100%; padding: 0px; margin-bottom: 0px; position: relative">
          <el-tab-pane label="测试信息" name="first" style="height: 100%; margin-bottom: 0px; position: relative">
            <el-card class="my-fill mt8" shadow="never" style="overflow: auto; height: 100%; padding: 2px 0px 60px">
              <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-width="120px" :inline="false" size="mini">
                <el-form-item label="Activity name" prop="name">
                  <el-input v-model="ruleForm.name" />
                </el-form-item>
                <el-form-item label="Activity zone" prop="region">
                  <el-select v-model="ruleForm.region" placeholder="Activity zone">
                    <el-option label="Zone one" value="shanghai" />
                    <el-option label="Zone two" value="beijing" />
                  </el-select>
                </el-form-item>
                <el-form-item label="Activity count" prop="count">
                  <el-select-v2 v-model="ruleForm.count" placeholder="Activity count" :options="options" />
                </el-form-item>
                <el-form-item label="Activity time" required>
                  <el-col :span="11">
                    <el-form-item prop="date1">
                      <el-date-picker v-model="ruleForm.date1" type="date" label="Pick a date" placeholder="Pick a date" style="width: 100%" />
                    </el-form-item>
                  </el-col>
                  <el-col class="text-center" :span="2">
                    <span class="text-gray-500">-</span>
                  </el-col>
                  <el-col :span="11">
                    <el-form-item prop="date2">
                      <el-time-picker v-model="ruleForm.date2" label="Pick a time" placeholder="Pick a time" style="width: 100%" />
                    </el-form-item>
                  </el-col>
                </el-form-item>
                <el-form-item label="Instant delivery" prop="delivery">
                  <el-switch v-model="ruleForm.delivery" />
                </el-form-item>
                <el-form-item label="Activity type" prop="type">
                  <el-checkbox-group v-model="ruleForm.type">
                    <el-checkbox label="Online activities" name="type" />
                    <el-checkbox label="Promotion activities" name="type" />
                    <el-checkbox label="Offline activities" name="type" />
                    <el-checkbox label="Simple brand exposure" name="type" />
                  </el-checkbox-group>
                </el-form-item>
                <el-form-item label="Resources" prop="resource">
                  <el-radio-group v-model="ruleForm.resource">
                    <el-radio label="Sponsorship" />
                    <el-radio label="Venue" />
                  </el-radio-group>
                </el-form-item>
                <el-form-item label="Activity form" prop="desc">
                  <el-input v-model="ruleForm.desc" type="textarea" />
                </el-form-item>
                <el-form-item label="Resources" prop="resource">
                  <el-radio-group v-model="ruleForm.resource">
                    <el-radio label="Sponsorship" />
                    <el-radio label="Venue" />
                  </el-radio-group>
                </el-form-item>
                <el-form-item label="Activity form" prop="desc">
                  <el-input v-model="ruleForm.desc" type="textarea" />
                </el-form-item>
                <el-form-item label="Resources" prop="resource">
                  <el-radio-group v-model="ruleForm.resource">
                    <el-radio label="Sponsorship" />
                    <el-radio label="Venue" />
                  </el-radio-group>
                </el-form-item>
                <el-form-item label="Activity form" prop="desc">
                  <el-input v-model="ruleForm.desc" type="textarea" />
                </el-form-item>
                <el-form-item label="Resources" prop="resource">
                  <el-radio-group v-model="ruleForm.resource">
                    <el-radio label="Sponsorship" />
                    <el-radio label="Venue" />
                  </el-radio-group>
                </el-form-item>
                <el-form-item label="Activity form" prop="desc">
                  <el-input v-model="ruleForm.desc" type="textarea" />
                </el-form-item>
                <el-form-item label="测试 form" prop="desc">
                  <el-input v-model="ruleForm.desc" type="textarea" />
                </el-form-item>
              </el-form>
            </el-card>
          </el-tab-pane>
          <el-tab-pane label="Config" name="second" style="overflow: auto; height: 100%; padding: 0px">Config</el-tab-pane>
          <el-tab-pane label="Role" name="third" style="overflow: auto; height: 100%; padding: 0px">Role</el-tab-pane>
          <el-tab-pane label="Task" name="fourth" style="overflow: auto; height: 100%; padding: 0px">Task</el-tab-pane>
        </el-tabs>
      </pane>
      <pane :size="paneSize">
        <el-tabs v-model="activeName" type="border-card" style="height: 100%; padding: 0px; margin-bottom: 0px; position: relative">
          <el-tab-pane label="测试信息" name="first" style="height: 100%; position: relative; position: relative">
            <el-card class="my-fill mt8" shadow="never" style="overflow: auto; height: 100%; padding: 2px 0px 100px">
              <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-width="120px" class="demo-ruleForm" :size="formSize" status-icon>
                <el-form-item label="Activity name" prop="name">
                  <el-input v-model="ruleForm.name" />
                </el-form-item>
                <el-form-item label="Activity zone" prop="region">
                  <el-select v-model="ruleForm.region" placeholder="Activity zone">
                    <el-option label="Zone one" value="shanghai" />
                    <el-option label="Zone two" value="beijing" />
                  </el-select>
                </el-form-item>
                <el-form-item label="Activity count" prop="count">
                  <el-select-v2 v-model="ruleForm.count" placeholder="Activity count" :options="options" />
                </el-form-item>
                <el-form-item label="Activity time" required>
                  <el-col :span="11">
                    <el-form-item prop="date1">
                      <el-date-picker v-model="ruleForm.date1" type="date" label="Pick a date" placeholder="Pick a date" style="width: 100%" />
                    </el-form-item>
                  </el-col>
                  <el-col class="text-center" :span="2">
                    <span class="text-gray-500">-</span>
                  </el-col>
                  <el-col :span="11">
                    <el-form-item prop="date2">
                      <el-time-picker v-model="ruleForm.date2" label="Pick a time" placeholder="Pick a time" style="width: 100%" />
                    </el-form-item>
                  </el-col>
                </el-form-item>
                <el-form-item label="Instant delivery" prop="delivery">
                  <el-switch v-model="ruleForm.delivery" />
                </el-form-item>
                <el-form-item label="Activity type" prop="type">
                  <el-checkbox-group v-model="ruleForm.type">
                    <el-checkbox label="Online activities" name="type" />
                    <el-checkbox label="Promotion activities" name="type" />
                    <el-checkbox label="Offline activities" name="type" />
                    <el-checkbox label="Simple brand exposure" name="type" />
                  </el-checkbox-group>
                </el-form-item>
                <el-form-item label="Resources" prop="resource">
                  <el-radio-group v-model="ruleForm.resource">
                    <el-radio label="Sponsorship" />
                    <el-radio label="Venue" />
                  </el-radio-group>
                </el-form-item>
                <el-form-item label="Activity form" prop="desc">
                  <el-input v-model="ruleForm.desc" type="textarea" />
                </el-form-item>
                <el-form-item label="Resources" prop="resource">
                  <el-radio-group v-model="ruleForm.resource">
                    <el-radio label="Sponsorship" />
                    <el-radio label="Venue" />
                  </el-radio-group>
                </el-form-item>
                <el-form-item label="Activity form" prop="desc">
                  <el-input v-model="ruleForm.desc" type="textarea" />
                </el-form-item>
                <el-form-item label="Resources" prop="resource">
                  <el-radio-group v-model="ruleForm.resource">
                    <el-radio label="Sponsorship" />
                    <el-radio label="Venue" />
                  </el-radio-group>
                </el-form-item>
                <el-form-item label="Activity form" prop="desc">
                  <el-input v-model="ruleForm.desc" type="textarea" />
                </el-form-item>
                <el-form-item label="Resources" prop="resource">
                  <el-radio-group v-model="ruleForm.resource">
                    <el-radio label="Sponsorship" />
                    <el-radio label="Venue" />
                  </el-radio-group>
                </el-form-item>
                <el-form-item label="Activity form" prop="desc">
                  <el-input v-model="ruleForm.desc" type="textarea" />
                </el-form-item>
                <el-form-item>
                  <el-button type="primary" @click="submitForm(ruleFormRef)"> Create </el-button>
                  <el-button @click="resetForm(ruleFormRef)">Reset</el-button>
                </el-form-item>
              </el-form>
            </el-card>
          </el-tab-pane>
          <el-tab-pane label="Config" name="second" style="overflow: auto; height: 100%; padding: 0px">Config</el-tab-pane>
          <el-tab-pane label="Role" name="third" style="overflow: auto; height: 100%; padding: 0px">Role</el-tab-pane>
          <el-tab-pane label="Task" name="fourth" style="overflow: auto; height: 100%; padding: 0px">Task</el-tab-pane>
        </el-tabs>
      </pane>
    </splitpanes>

需要注意，上面滚动样式的时候，需要注意离底部距离需要有一定的高度，否则有部分内容会被遮挡看不见，我这里是设置成：padding: 2px 0px 60px  ，实际项目自己调整

重点，最后必须加上样式修改，否则滚动 的话，会连tabs的标题栏一样滚动，具体代码如下

<style scoped lang="scss">
//必须设置这样，否则滚动的话，会连tabs的标题栏一起滚动
:deep(.el-tabs__content) {
  position: relative;
  height: 100%;
  padding: 0px;
}
</style>