ZBLOG

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

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

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

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

  4. 确认拼写错误: 注意到你的代码中的类名存在拼写错误:.progeam-down 应该为 .program-down.

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

  1. <template>
  2. <div class="program-box">
  3. <div class="program-tabs">
  4. <el-tabs
  5. v-model="form.activeName"
  6. @tab-click="handleClick"
  7. class="el-tabs-z"
  8. >
  9. <el-tab-pane
  10. v-for="item in form.tabbs"
  11. :key="item.$index"
  12. :label="item.label"
  13. :name="item.name"
  14. >
  15. <span slot="label">{{ item.label }}</span>
  16. </el-tab-pane>
  17. </el-tabs>
  18. </div>
  19. <div class="program-down"> <!-- 修改拼写错误 -->
  20. <div class="workFlowInfo" v-for="(info, index) in workflowInfos" :key="index">
  21. <ul @click="onWorkFlowInfo(info.key)">
  22. <li>{{ info.title }}</li>
  23. <li><span class="el-icon-arrow-down" v-if="info.isOpen" /><span class="el-icon-arrow-up" v-if="!info.isOpen" /></li>
  24. </ul>
  25. <component :is="info.component" v-if="info.isOpen"/>
  26. </div>
  27. </div>
  28. </div>
  29. </template>
  30. <script>
  31. import approvalRecord from "./approvalRecord.vue";
  32. import registerInfo from "./registerInfo.vue";
  33. import controlMeetingInfo from "./controlMeetingInfo.vue";
  34. import workFlowInfo from "./workFlowInfo.vue";
  35. import fileUpload from "@/components/fileUpload.vue";
  36. export default {
  37. components: {
  38. workFlowInfo,
  39. registerInfo,
  40. controlMeetingInfo,
  41. approvalRecord,
  42. fileUpload
  43. },
  44. data() {
  45. return {
  46. workflowInfos: [
  47. { title: '工作流信息', key: 'isWork', isOpen: true, component: workFlowInfo },
  48. { title: '申请信息', key: 'isApplication', isOpen: true, component: registerInfo },
  49. { title: '方案管控会', key: 'isControlMeeting', isOpen: true, component: controlMeetingInfo },
  50. { title: '审批记录', key: 'isRecording', isOpen:true , component: approvalRecord},
  51. { title:'文件列表', key:'isFileList' , isOpen:true , component:fileUpload }
  52. ],
  53. form:{
  54. activeName:"workFlowInfo",
  55. fileList:[]
  56. }
  57. };
  58. },
  59. methods:{
  60. handleClick(items) {
  61. console.log("duhao__22222", items);
  62. console.log("duhao__activeName", this.form.activeName);
  63. },
  64. onWorkFlowInfo(key) {
  65. const info = this.workflowInfos.find(item => item.key === key);
  66. if (info) {
  67. info.isOpen = !info.isOpen;
  68. }
  69. },
  70. }
  71. };
  72. </script>
  73. <style lang="less" scoped>
  74. .program-box {
  75. height: 100vh;
  76. display: flex;
  77. flex-direction: column;
  78. .program-tabs {
  79. height: 50px;
  80. /deep/.el-tabs__nav .is-top {
  81. padding-left: 20px;
  82. }
  83. }
  84. .program-down { /* 修改拼写错误 */
  85. flex-grow: 1;
  86. overflow-y:auto; /* 保持自动滚动 */
  87. .workFlowInfo{
  88. width :100%;
  89. ul{
  90. width :98%;
  91. margin :0 auto ;
  92. list-style:none;
  93. display:flex ;
  94. justify-content :space-between;
  95. border-bottom :1px solid #e4e3e4 ;
  96. li{
  97. margin :10px ;
  98. }
  99. }
  100. .fileUpload{
  101. margin :0 5px;
  102. }
  103. }
  104. }
  105. }
  106. </style>

总结:

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

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


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

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

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

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

联系我们

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

微信号:3007537140

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

关注我们
x

注册

已经有帐号?