左右联动布局效果

 效果图:

<template><el-dialog :modelValue="modelValue" :before-close="close" fullscreen :close-on-click-modal="false"><div class="farmer_detail"><div class="info_content"><div class="info_left"><!-- @click.native="stepClick(item, key)" --><el-tabs tab-position="left" class="demo_tab_farmer_pop" v-model="activeStep" @tab-click="stepClick"><el-tab-pane :label="item.title" :name="key" v-for="(item, key) in stepList" :key="key"><template #label><span class="custom_label"><span>{{ item.title }}</span></span></template></el-tab-pane></el-tabs></div><div class="info_right" ref="rightRef"><el-scrollbar :height="calcScrollHeight + 'px'" ref="scrollMenuRef" @scroll="onScroll" @wheel="handleWheel"><!-- <p v-for="item in 20" :key="item" class="scrollbar-demo-item">{{ item }}</p> --><div class="scroll_container" ref="right" id="scrollContent"><el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-width="130px"><div class="scroll_content"><div class="info_title" id="JCxx">基础信息</div><el-row :gutter="20"><el-col :xs="colSpan.xs" :sm="colSpan.sm" :md="colSpan.md" :lg="colSpan.lg" :xl="colSpan.xl"><el-form-item prop='realName' label='姓名'><el-input v-model="ruleForm.realName" placeholder="请输入姓名" :disabled='isEdit' clearablestyle='width:100%;'></el-input></el-form-item></el-col><el-col :xs="colSpan.xs" :sm="colSpan.sm" :md="colSpan.md" :lg="colSpan.lg" :xl="colSpan.xl"><el-form-item prop='paperNumber' label='身份证号'><el-input v-model="ruleForm.paperNumber" placeholder="请输入身份证号" :disabled='isEdit' clearablestyle='width:100%;'></el-input></el-form-item></el-col><el-col :xs="colSpan.xs" :sm="colSpan.sm" :md="colSpan.md" :lg="colSpan.lg" :xl="colSpan.xl"><el-form-item prop='gender' label='性别'><selectOption v-model="ruleForm.gender" placeholder="请选择性别" :disabled="isEdit":optionList="genderList" clearable></selectOption></el-form-item></el-col></el-row></div><div class="scroll_content"><div class="info_title" id="ZZxx">组织信息</div><el-row><el-col :xs="colSpan.xs" :sm="colSpan.sm" :md="colSpan.md" :lg="colSpan.lg" :xl="colSpan.xl"><el-form-item label="担任职务" prop="holdType"><selectOption v-model="ruleForm.holdType" placeholder="请选择担任职务" :disabled="isEdit":multiple="false" :collapseTags="true" typeCode="new_has_job" clearable></selectOption></el-form-item></el-col></el-row></div><div class="scroll_content"><div class="info_title" id="JYxx">教育与社会信息</div><el-row><el-col :xs="colSpan.xs" :sm="colSpan.sm" :md="colSpan.md" :lg="colSpan.lg" :xl="colSpan.xl"><el-form-item prop='school' label='毕业院校'><el-input v-model="ruleForm.school" placeholder="" :disabled='isEdit' clearablestyle='width:100%;'></el-input></el-form-item></el-col></el-row></div><div class="scroll_content"><div class="info_title" id="ZCxx">资产信息</div><div><CusTable ref="zcTableRef" :column="zcColumnTD" :tableData="zcTableDataTD" title="土地信息"><span slot="title">土地信息(7块,3.68亩)</span></CusTable></div></div><div class="scroll_content"><div class="info_title" id="BTxx">补贴信息</div><CusTable ref="btTableRef" :column="btColumn" :tableData="btTableData" title="补贴信息(7项)"><span slot="title">补贴信息(7项)</span></CusTable><!-- 补贴信息 --></div><div class="info_title" id="XYxx">信用评价</div> --></div></el-scrollbar></div></div><!-- </el-card> --></div><template #footer><el-button type="default" @click="close">取 消</el-button><el-button type="primary" @click="submit(ruleFormRef)" v-if="!btnShow">确 认</el-button></template></el-dialog>
</template>
const stepList = ref([{ title: '基础信息', id: 'JCxx' },
....{ title: '资产信息', id: 'ZCxx' },{ title: '补贴信息', id: 'BTxx' },{ title: '信用评价', id: 'XYxx' }])const scrollMenuRef = ref(null)
//计算右侧可滚动区域高度
const calcScrollHeight = computed(() => clientHeight.value - 390)
const clientHeight: any = ref(document.documentElement.clientHeight || document.body.clientHeight)
watch(clientHeight, (newVal, oldVal) => {return newVal
})
let right = ref(null); // 右边 列表盒子
onMounted(() => {window.onresize = () => {clientHeight.value = `${document.documentElement.clientHeight}`;}
})const stepTag = ref(1) //标识是点击滚动还是滚轮滑动滚动
const rightRef = ref()//点击滚动  //待完善功能是否到底部不可点击或者滚动
const stepClick = (item: any, index: number) => {let ind = Number(item.index)var id = "#" + stepList.value[ind].idstepTag.value = 1if (activeStep.value - ind == 0) returnactiveStep.value = ind//监听滚动条是否到底部const curDom: any = document.querySelector(id);const dom: any = document.getElementById('scrollContent');if (curDom) {document.querySelector(id).scrollIntoView({behavior: "smooth",block: "start",inline: "nearest",});}
}//右侧内容滚动方法
const onScroll = (e:any) => {if (stepTag.value == 1) returnlet scrollItems: any = document.querySelectorAll(".scroll_content");// console.log(e, scrollItems,scrollItems[0].offsetTop,'ee')for (let i = scrollItems.length - 1; i >= 0; i--) {// 判断滚动条滚动距离是否大于当前滚动项可滚动距离 e.target.scrollToplet judge = e.scrollTop >= scrollItems[i].offsetTop - 100 - scrollItems[0].offsetTop;if (judge) {activeStep.value = i;break;}}
}
// 是否是右侧滚动
const handleWheel = (e) => {stepTag.value = 0
}

<style lang="scss" scoped>
.farmer_detail {.img_box {height: 200px;text-align: center;.user_name {padding-top: 10px;font-size: 18px;}.block {.btn_back {float: right;}}}.info_content {display: flex;position: relative;// width: 100%;justify-content: flex-end;.info_left {width: 300px;.demo_tab_farmer_pop {>:deep(.el-tabs__header) {.el-tabs__item {// width:244px;padding-right: 60px;height: 60px;line-height: 60px;font-size: 18px;transition: background-color .3s ease-in-out;}.el-tabs__nav-wrap::after {background-color: #ECF3FF;}.el-tabs__nav-wrap,.el-tabs__nav-scroll {overflow: visible;}.el-tabs__item.is-active {background-color: #ECF3FF;}.el-tabs__item::after {content: "";position: absolute;right: -4px;bottom: 25px;width: 10px;height: 10px;box-sizing: border-box;border: 1px solid #CCCCCC;background: #FFFFFF;border-radius: 50%;}.el-tabs__active-bar.is-left {width: 10px;height: 10px !important;border-radius: 50%;background-color: #2F71F5;top: 25px;right: -4px;}}}}.info_right {flex: 1;// width: calc(100% - 200px);overflow-y: auto;.scroll_container {padding-right: 20px;}.info_title {display: flex;align-items: center;margin: 20px 0;font-size: 18px;font-weight: 700;}.info_title:first-child {margin-top: 0;}}}
}
</style>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/260767.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

算法-矩阵置零

1、题目来源 73. 矩阵置零 - 力扣&#xff08;LeetCode&#xff09; 2、题目描述 给定一个 m x n 的矩阵&#xff0c;如果一个元素为 0 &#xff0c;则将其所在行和列的所有元素都设为 0 。请使用 原地 算法。 示例 1&#xff1a; 输入&#xff1a;matrix [[1,1,1],[1,0,1…

深度学习基础之《TensorFlow框架(3)—TensorBoard》

一、TensorBoard可视化学习 1、TensorFlow有一个亮点就是&#xff0c;我们能看到自己写的程序的可视化效果&#xff0c;这个功能就是TensorBoard 2、TensorFlow可用于训练大规模深度神经网络所需的计算&#xff0c;使用该工具涉及的计算往往复杂而深奥。为了方便TensorFlow程…

C语言---指针进阶

1.字符指针 int main() {char str1[] "hello world";char str2[] "hello world";const char* str3 "hello world.";const char* str4 "hello world.";if (str3 str4){//常量字符串在内存里面是无法修改的&#xff0c;所以没必要…

Aster实现一台电脑当两台使——副屏搭配键鼠

前言&#xff1a;笔者每年回家&#xff0c;都面临着想要和小伙伴一起玩游戏&#xff0c;但小伙伴没有电脑/只有低配电脑的问题。与此同时&#xff0c;笔者自身的电脑是高配置的电脑&#xff0c;因此笔者想到&#xff0c;能否在自己的电脑上运行游戏&#xff0c;在小伙伴的电脑上…

详解平面点云面积计算

部分代码展示&#xff1a; &#xff08;1&#xff09;利用格网法计算面积&#xff1a; //&#xff08;2&#xff09;测试使用格网法计算平面点云面积 void main() {char *inputpath "D:\\testdata\\data.txt";vector<pcl::PointXYZ> points ReadPointXYZIn…

五种多目标优化算法(MOGWO、MOJS、NSWOA、MOPSO、MOAHA)性能对比(提供MATLAB代码)

一、5种多目标优化算法简介 1.1MOGWO 1.2MOJS 1.3NSWOA 1.4MOPSO 1.5MOAHA 二、5种多目标优化算法性能对比 为了测试5种算法的性能将其求解9个多目标测试函数&#xff08;zdt1、zdt2 、zdt3、 zdt4、 zdt6 、Schaffer、 Kursawe 、Viennet2、 Viennet3&#xff09;&#xff0…

14. UE5 RPG使用曲线表格设置回复血量值

之前的文章中&#xff0c;我使用的都是固定的数值来设置血量回复或者蓝量回复&#xff0c;在这篇文章里面&#xff0c;介绍一下使用曲线表格。通过曲线表格我们可以设置多个数值&#xff0c;然后通过去通过修改索引对应的数值去修改回复的血量或者蓝量。 创建曲线表格 首先创…

IOT-Reaserch虚拟机配置

我用的是VirturalBox 主机与物理机之间的复制粘贴问题 VirtualBox Ubuntu无法安装增强功能以及无法复制粘贴踩坑记录_virtualbox安装增强功能没反应-CSDN博客 上面这篇博客帮助了我很多&#xff0c;摘取重要的重新提示一遍 运行虚拟机选择&#xff1a;设备->安装增强功能…

Midjourney绘图欣赏系列(五)

Midjourney介绍 Midjourney 是生成式人工智能的一个很好的例子&#xff0c;它根据文本提示创建图像。它与 Dall-E 和 Stable Diffusion 一起成为最流行的 AI 艺术创作工具之一。与竞争对手不同&#xff0c;Midjourney 是自筹资金且闭源的&#xff0c;因此确切了解其幕后内容尚不…

消息队列-RabbitMQ:workQueues—工作队列、消息应答机制、RabbitMQ 持久化、不公平分发(能者多劳)

4、Work Queues Work Queues— 工作队列 (又称任务队列) 的主要思想是避免立即执行资源密集型任务&#xff0c;而不得不等待它完成。我们把任务封装为消息并将其发送到队列&#xff0c;在后台运行的工作进程将弹出任务并最终执行作业。当有多个工作线程时&#xff0c;这些工作…

基于Java SSM框架实现高校奖学金管理系统项目【项目源码+论文说明】计算机毕业设计

基于java的SSM框架实现高校奖学金管理系统演示 摘要 21世纪的今天&#xff0c;随着社会的不断发展与进步&#xff0c;人们对于信息科学化的认识&#xff0c;已由低层次向高层次发展&#xff0c;由原来的感性认识向理性认识提高&#xff0c;管理工作的重要性已逐渐被人们所认识…

安卓OpenGL添加水印并录制(二)---抖音录制原理

文章目录 前文回顾音频处理留个小思考总结 本文首发地址 https://h89.cn/archives/146.html 最新更新地址 https://gitee.com/chenjim/chenjimblog 源码地址: Gitee: OpenGLRecorder 通过 前文 我们知道了如何采集 Camera 视频&#xff0c;叠加水印、贴纸保存为MP4&#xff0c;…

linux部署jenkins,支持jdk1.8

无废话&#xff0c;纯干活安装指令 本文前提条件需安装jdk8&#xff0c;安装参考&#xff1a;Linux配置jdk环境 下载资源 # 创建安装目录 mkdir -p /data/jenkins && cd /data/jenkins# 下载jenkins的war包&#xff0c;v2.346.x支持jdk1.8&#xff0c;高于这个版本的…

2024年的一些碎碎念(小目标)

新年开工好几天了&#xff0c;最近思绪非常混乱&#xff0c;因为入职软件测试又过去一年了&#xff0c;但是却没有达到像培训机构说的那样月薪过万&#xff0c;所以整个人很焦虑。最近也去投了简历&#xff0c;有个HR说跳槽太频繁拒绝了我&#xff0c;入行两年换了两家公司&…

AutoKeras(Python自动化机器学习)多模态数据和多任务

要点拓扑 AutoKeras 拓扑 要点 常规机器学习&#xff1a;scikit-learn示例探索性数据分析和数据预处理&#xff0c;线性回归&#xff0c;决策树图像分类ResNet模型示例&#xff0c;合成数据集DenseNet模型示例绘图线性回归和决策树模型使用Python工具seaborn、matplotlib、pan…

设计模式四:适配器模式

1、适配器模式的理解 适配器模式可以理解为有两个现成的类Adaptee和Target&#xff0c;它们两个是不能动的&#xff0c;要求必须使用B这个类来实现一个功能&#xff0c;但是A的内容是能复用的&#xff0c;这个时候我们需要编写一个转换器 适配器模式 Adaptee&#xff1a;被适…

MyBatis学习总结

MyBatis分页如何实现 分页分为 逻辑分页&#xff1a;查询出所有的数据缓存到内存里面&#xff0c;在从内存中筛选出需要的数据进行分页 物理分页&#xff1a;直接用数据库语法进行分页limit mybatis提供四种方法分页&#xff1a; 直接在sql语句中分页&#xff0c;传递分页参数…

主流开发语言和开发环境介绍

主流开发语言和开发环境介绍文章目录 ⭐️ 主流开发语言&#xff1a;2024年2月编程语言排行榜&#xff08;TIOBE前十&#xff09;⭐️ 主流开发语言开发环境介绍1.Python2.C3.C4.Java5.C#6.JavaScript7.SQL8.GO9.Visual Basic10.PHP ⭐️ 主流开发语言&#xff1a;2024年2月编程…

二叉树(6)——二叉树的创建和销毁

1 二叉树的创建 整体思路 将数组里的元素一直分为根&#xff0c;左子树&#xff0c;右子树&#xff0c;遇到#就返回NULL&#xff0c;链接到上层递归的左子树或者右子树&#xff0c;一定要把一个节点的左子树全部递归完才能返回到右子树。这种方法也可以scanf一个数组里的元素&…