element-plus折叠面板如何结合锚点（锚点不用组件）

1. 折叠面板：去网站复制代码到自己的文件官网

2. 锚点：用菜单组件做布局

3. 绑定

   1. 在菜单组件设置

      :default-active="activeSection"写菜单组件里面
      
      
      const activeSection = ref('1');定义

      default-active 用于设置组件加载时哪个面板是展开状态。 

       @select="handleSelect"

      绑定事件

   2. 折叠面板设置

      v-model="activeNames"
      复制的都有这个
      要定义哟
      const activeNames = ref([]);

       <el-collapse-item 
                          name="2"
                          id="2"
                      >
      绑上id和name，锚点功能靠id，展开功能靠name

   3. 设置handleSelect

      1. const handleSelect = (key) => {
           activeNames.value = [key];
         }

         实现点击锚点菜单展开

      2. const handleSelect = (key) => {
           activeNames.value = [key];//展开
           const element = document.getElementById(key);//获取是哪个面板
           if (element) {
             element.scrollIntoView({ behavior: 'smooth', block: 'nearest' });//滚动
         }

         element.scrollIntoView({ behavior: 'smooth', block: 'nearest' });

         behavior: 'smooth'：表示滚动将以平滑的方式进行，而不是瞬间跳转。block: 'nearest'：如果目标元素已经在可视区域内，它将尽量只滚动到最近的位置，避免多余的滚动，除了这个还有center，start

4. 锚点定位其他面板不关闭 

• 到上一步已经实现功能了，但点击锚点之前打开的面板要关闭是因为activeNames.value = [key]只设置了一个key值
• 实现：

1. 设置 添加activeNames.value的值

   activeNames.value.push(key); 

   这里设置了就实现了，但效果不好

2.       设置延时等待dom更新

• 原因：由于dom没更新导致锚点功能无法到理想的位置，需要再点击一下
• 解决：设置nextTick
  1. nextTick：这个函数会等待下一个 DOM 更新周期，确保在调用 scrollIntoView 时元素的状态已经更新。

     import { nextTick } from 'vue';
     
     const handleSelect = async (key) => {
       activeNames.value.push(key); // 展开面板
       await nextTick(); // 等待 DOM 更新
     
       const element = document.getElementById(key); // 获取元素
       if (element) {
         element.scrollIntoView({ behavior: 'smooth', block: 'nearest' }); // 滚动到该元素
       }
     };

•              使用 setTimeout： 

• 完整代码

  1. import { nextTick } from 'vue';
     
     const handleSelect = async (key) => {
       // 展开面板
       activeNames.value.push(key);
       
       await nextTick(); // 等待 DOM 更新
       
       const element = document.getElementById(key); // 获取元素
       if (element) {
         // 添加一定的延迟，确保元素在 DOM 中可见
         setTimeout(() => {
           element.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
         }, 100); // 100ms 的延迟
       }
     };