-DPDK中文网

要解决滚动不到最底部的问题，可能需要检查几个方面，包括CSS样式设置和HTML结构。以下是一些建议和修改：

确保 overflow-y 正确应用: 在 .progeam-down 类中，确保 flex-grow: 1; 和 overflow-y: auto; 设置得当，以允许其内容滚动。
容器高度: 确保所有父元素的高度设置正确。如果父元素的高度没有限制，那么子元素不会知道何时需要滚动。
内容溢出: 确保子组件（如 <workFlowInfo />, <registerInfo />, 等）有足够的内容以触发滚动条。
确认拼写错误: 注意到你的代码中的类名存在拼写错误：.progeam-down 应该为 .program-down.

根据上述几点，可以对你的样式和结构进行微调。下面是经过修改的代码示例：

<template>
  <div class="program-box">
    <div class="program-tabs">
      <el-tabs
        v-model="form.activeName"
        @tab-click="handleClick"
        class="el-tabs-z"
      >
        <el-tab-pane
          v-for="item in form.tabbs"
          :key="item.$index"
          :label="item.label"
          :name="item.name"
        >
          <span slot="label">{{ item.label }}</span>
        </el-tab-pane>
      </el-tabs>
    </div>
    <div class="program-down"> <!-- 修改拼写错误 -->
      <div class="workFlowInfo" v-for="(info, index) in workflowInfos" :key="index">
        <ul @click="onWorkFlowInfo(info.key)">
          <li>{{ info.title }}</li>
          <li><span class="el-icon-arrow-down" v-if="info.isOpen" /><span class="el-icon-arrow-up" v-if="!info.isOpen" /></li>
        </ul>
        <component :is="info.component" v-if="info.isOpen"/>
      </div>
    </div>
  </div>
</template>

<script>
import approvalRecord from "./approvalRecord.vue";
import registerInfo from "./registerInfo.vue";
import controlMeetingInfo from "./controlMeetingInfo.vue";
import workFlowInfo from "./workFlowInfo.vue";
import fileUpload from "@/components/fileUpload.vue";

export default {
  components: {
    workFlowInfo,
    registerInfo,
    controlMeetingInfo,
    approvalRecord,
    fileUpload
  },
  data() {
    return {
      workflowInfos: [
        { title: '工作流信息', key: 'isWork', isOpen: true, component: workFlowInfo },
        { title: '申请信息', key: 'isApplication', isOpen: true, component: registerInfo },
        { title: '方案管控会', key: 'isControlMeeting', isOpen: true, component: controlMeetingInfo },
        { title: '审批记录', key: 'isRecording', isOpen:true , component: approvalRecord},
        { title:'文件列表', key:'isFileList' , isOpen:true , component:fileUpload }
      ],
      form:{
        activeName:"workFlowInfo",
         fileList:[]
       } 
     };
   },
   methods:{
     handleClick(items) {
       console.log("duhao__22222", items);
       console.log("duhao__activeName", this.form.activeName);
     },
     onWorkFlowInfo(key) {
       const info = this.workflowInfos.find(item => item.key === key);
       if (info) {
         info.isOpen = !info.isOpen;
       }
     },
   }
};
</script>

<style lang="less" scoped>
.program-box {
  height: 100vh;
  display: flex;
  flex-direction: column;

  .program-tabs {
    height: 50px;
    /deep/.el-tabs__nav .is-top {
      padding-left: 20px;
    }
  }

  .program-down { /* 修改拼写错误 */
    flex-grow: 1; 
    overflow-y:auto; /* 保持自动滚动 */
    
    .workFlowInfo{
      width :100%;

      ul{
          width :98%;
          margin :0 auto ;
          list-style:none;
          display:flex ;
          justify-content :space-between;
          
           border-bottom :1px solid #e4e3e4 ;

           li{
               margin :10px ;
           }
       }

       .fileUpload{
           margin :0 5px;
       }
     }
   }
}
</style>