左右联动布局效果-编程知识

效果图：

<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>