点击左侧大纲，右侧内容滑动到可视位置并高亮

效果：

左侧：

            <draggable style="overflow-y: auto; height: 500px;" :list="widgetList" ghost-class="ghost" itemKey="txId" :force-fallback="true" group="list"
              :fallback-class="true" :fallback-on-body="true" class="drag-content">
              <template #item="{ element, index }">
                <div class="move outline" :class="activeMenu === index ? 'active' : ''" @click="jump(index)">
                  <el-icon v-if="element.icon">
                    <component :is="element.icon" />
                  </el-icon>
                  <span style='margin-right:10px' v-if="element.txTip != 'Input'"><span>Q</span>{{ getFilteredIndex(index)
                  }}. </span>
                  <span style='margin-right:10px' v-else><span>R</span>.</span>
                  <span class="outline-tmTitle">{{ element.tmTitle }} </span>
                </div>
              </template>
            </draggable>

右侧：

            <template #item="{ element, index }">
              <div class="move contain_box mb-15 activeItem" :class="activeMenu === index ? 'activeC' : ''" @click="jump(index)">
                <div class="tabBar">
                  <div><span v-if="element.txTip != 'Input'"><span>Q</span>{{ getFilteredIndex(index) }}. </span>
                    <span v-else><span>R</span>.</span>
                    <span>{{ element.name }} </span>
                    <span v-if="element.pz.sfBt == '0'">(必填)</span>
                  </div>
                  <div>
                    <el-icon class="handle-icon" title="按住拖动题目">
                      <Rank />
                    </el-icon>
                    <el-icon title="复制题目" @click="copyWidget(element)">
                      <DocumentCopy />
                    </el-icon>
                    <el-icon title="重置题目" @click="resetWidget(element)">
                      <RefreshLeft />
                    </el-icon>
                    <el-icon title="删除题目" @click="deleteWidget(index)">
                      <Delete />
                    </el-icon>
                  </div>
                </div>
              </div>
          </template>

js:

// 点击大纲
let activeMenu = ref(null)
const jump = (val) => {
  activeMenu.value = val
  const targetElement = document.querySelectorAll('.activeItem')[val]; // 获取目标元素
  targetElement.scrollIntoView({ behavior: 'smooth', block: 'center' }); // 滚动到目标元素
}

css:

.outline {
  display: flex;
  align-items: center;
  height: 40px;
  border-bottom: 1px solid #e9eaec;
  cursor: pointer;
  transition: color 0.3s;/* 添加过渡效果 */

  .el-icon {
    margin-right: 4px;
    font-size: 14px;
  }

  .outline-tmTitle {
    display: inline-block;
    width: 220px;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
  }
}

.outline:hover {
  color: #2d8cf0 !important;
}

.active {
  color: #2d8cf0 !important;
  border-color: #2d8cf0 !important;
}
.activeC {
  border:1px solid #2d8cf0 !important;
}