1关于锚点定位组件。el-anchor

（1）给el-anchor设置container属性。表示要控制哪个容器滚动

（2）一定要给容器添加高度。否则无效

<el-affix :offset="50">
      <el-anchor :affix="true" :offset="50" :container="containerRef" direction="horizontal" @click="handleClickAnchor">
        <el-anchor-link href="#base" title="基本信息" />
        <el-anchor-link href="#concatPerson" title="联系人" />
        <el-anchor-link href="#address" title="地址" />
        <el-anchor-link href="#rule" title="结算规则" />
      </el-anchor>
 </el-affix>


<div ref="containerRef" class="container">
      <section id="base" ref="baseRef">
        <h2>基本信息</h2>
      </section>
      <section id="address" ref="addressRef">
        <h2>地址</h2>
      </section>
      <section id="rule" ref="ruleRef">
        <h2>结算规则</h2>
      </section>
      <section id="rule" ref="ruleRef">
        <h2>结算规则</h2>
      </section>

2 如何给下拉菜单的command传递参数？

 <el-dropdown trigger="click" @command="handleCommand">
                  <span class="el-dropdown-link">
                    <el-icon class="el-icon--right">
                      <arrow-down />
                    </el-icon>
                  </span>
                  <template #dropdown>
                    <el-dropdown-menu>
                      <el-dropdown-item></el-dropdown-item>
                      <el-dropdown-item :command="{ type: 'refresh', val: '' }">刷新本页</el-dropdown-item>
                      <el-dropdown-item :command="{ type: 'all', val: '' }">关闭全部</el-dropdown-item>
                      <el-dropdown-item :command="{ type: 'otherTag', val: '' }">关闭其他</el-dropdown-item>
                      <el-dropdown-item
                        v-for="tag of foldPageTags"
                        :key="tag.path"
                        :command="{ type: 'clickOtherTag', val: tag.path }"
                        >{{ tag.title }}</el-dropdown-item
                      >
                    </el-dropdown-menu>
                  </template>
</el-dropdown>

注意此处：

  <el-dropdown-item
                        v-for="tag of foldPageTags"
                        :key="tag.path"
                        :command="{ type: 'clickOtherTag', val: tag.path }"
                        >{{ tag.title }}</el-dropdown-item
                      >
 </el-dropdown-menu>

<script>

const handleCommand = (data: CommandItem) => {
  let MethodsObj: Methods = {
    other: closeOtherTabs,
    all: closeAllTabs,
    refresh: refreshEvent,
    otherTag: handlerOtherTag,
    clickOtherTag: clickOtherTag
  }
  console.log('handleCommand---data', data)
  let { type, val } = data
  MethodsObj[type] && MethodsObj[type](val)
}


</script>

这里通过给下拉菜单某个具体项的command传递对象的方式把参数传递过去。在command中接受对应的数据

3 popover弹窗+Autocomplete，如何避免移入到Autocomplete搜索结果的词条时，整个popover消失的问题？

需求是这样的：给定一个icon，当鼠标移入时悬浮展示一个输入框，当给输入框输入关键词时可以模糊搜索下拉词条。鼠标移出icon时，只展示icon。

原始代码：

<el-popover trigger="hover" placement="bottom" :offset="0" :show-arrow="false">
                <template #reference>
                  <el-icon> <search /> </el-icon>
                </template>
                <template #default>
                  <el-autocomplete
                    
                    v-model="searchQuery"
                    :fetch-suggestions="querySearch"
                    placeholder="请输入关键词"
                    @select="searchMenuByGlobal"
                    @click.stop
                  ></el-autocomplete>
                  
                </template>
   </el-popover>

问题出现了。当鼠标移入搜索结果的词条时，整个popover立刻消失。问题的症结就在这里：

这里我们需要把Autocomplement组件的这个属性设置为false。即可。Autocomplement不再插入到input下。不受它的影响。这样就正常了

正确代码：

<el-popover trigger="hover" placement="bottom" :offset="0" :show-arrow="false">
                <template #reference>
                  <el-icon> <search /> </el-icon>
                </template>
                <template #default>
                  <el-autocomplete
                     :teleported="false"  //注意这里
                    v-model="searchQuery"
                    :fetch-suggestions="querySearch"
                    placeholder="请输入关键词"
                    @select="searchMenuByGlobal"
                    @click.stop
                  ></el-autocomplete>
                  
                </template>
   </el-popover>

4 如何实现树形菜单无限级拖动，改变层级。但是最后一层不展示操作？

基础代码：

<el-tree
              :data="treeData"
              :props="defaultProps"
              node-key="orgId"
              draggable
              @node-click="handerNodeClick"
              :allow-drop="allowDrop"
              @node-drop="handleNodeDrop"
              :render-after-expand="false"
            >
              <template #default="{ node, data }">
                <div class="node_inline">
                  <div>{{ node.label }}</div>
                  <div>
                    <span v-if="data.level < MAX_LEVEL">
                      <span class="oper_btn" @click="operateChildNode('edit', data)"
                        ><el-icon><EditPen /></el-icon
                      ></span>
                      <span class="oper_btn" @click="deleteNode(data)"
                        ><el-icon><RemoveFilled /></el-icon
                      ></span>
                      <span class="oper_btn" type="primary" @click="operateChildNode('add', data)"
                        ><el-icon><CirclePlusFilled /></el-icon
                      ></span>
                    </span>
                  </div>
                </div>
              </template>
            </el-tree>


<script>

const allowDrop = (draggingNode: any, dropNode: any, type: AllowDropType) => {
  console.log(' ~ allowDrop ~ dropNode:', dropNode, type)
  if (dropNode?.level === MAX_LEVEL) {
    return type !== 'inner'
  } else {
    return true
  }
}

const handerNodeClick = (node: any, nodeAttr: any, treeNode: any, ev: Event) => {
  curNode.value = node
  console.log('当前node', curNode.value)
}

const handleNodeDrop = (draggingNode: any, dropNode: any, dropType: string, ev: Event) => {
  const draggingNodeLevel = draggingNode.level
  const dropNodeLevel = dropNode.level
  ev.dataTransfer.dropEffect = 'none'
  if (dropType === 'inner') {
    if (draggingNodeLevel === 4) {
      console.log('不允许第四级创建新的子节点')
      return // 阻止操作
    }
    updateNodeLevels(draggingNode.data, dropNodeLevel + 1)
  } else {
    // 如果拖拽到目标节点的同级位置，则更新层级
    updateNodeLevels(draggingNode.data, dropNodeLevel)
  }
  console.log('treeData', treeData.value)
}

watch(
  treeData,
  (newValue) => {
    newValue.forEach((node) => updateNodeLevels(node, 1))
  },
  { deep: true }
)




</script>

这里特别特别要注意的是：allowDrop这个函数。它才是核心。这里的判断如果没加上去的话，假设我们最大层级是5层，那我们拖动时层级会一直无限累加。把某个元素拖到第5层时会自动变成第6层，以此类推。所以这里一定要加 层级的判断

const allowDrop = (draggingNode: any, dropNode: any, type: AllowDropType) => {
  console.log(' ~ allowDrop ~ dropNode:', dropNode, type)
  if (dropNode?.level === MAX_LEVEL) {
    return type !== 'inner'
  } else {
    return true
  }
}