ZBLOG

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

  1. 确保 overflow-y 正确应用: 在 .progeam-down 类中,确保 flex-grow: 1;overflow-y: auto; 设置得当,以允许其内容滚动。

  2. 容器高度: 确保所有父元素的高度设置正确。如果父元素的高度没有限制,那么子元素不会知道何时需要滚动。

  3. 内容溢出: 确保子组件(如 <workFlowInfo />, <registerInfo />, 等)有足够的内容以触发滚动条。

  4. 确认拼写错误: 注意到你的代码中的类名存在拼写错误:.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> 

总结:

  • 检查拼写和 CSS 属性。
  • 确保有足够的内容来实现滚动效果。
  • 使用动态组件使得代码更加简洁,同时提高可读性。

请尝试这些更改,看看是否能解决您的问题!如果还有问题,请提供更多具体的信息以便进一步帮助。


内容由零声教学AI助手提供,问题来源于学员提问

本站部分文章来源于网络,版权归原作者所有,如有侵权请联系站长删除。
转载请注明出处:https://golang.0voice.com/?id=20828

分享:
扫描分享到社交APP
上一篇
下一篇
发表列表
游客 游客
此处应有掌声~
评论列表

还没有评论,快来说点什么吧~

联系我们

在线咨询: 点击这里给我发消息

微信号:3007537140

上班时间: 10:30-22:30

关注我们
x

注册

已经有帐号?