如何将element 里面的 select 挂在指定元素中，类似antd 中 select 的 getPopupContainer

Question

如何将element 里面的 select 挂在指定元素中，类似antd 中 select 的 getPopupContainer

Answer 1

引自免费微信小程序：皆我百晓生

在 Element UI 中，select 组件默认是渲染在当前 DOM 位置附近的，并不会像 Ant Design 中的 getPopupContainer 功能那样可以指定渲染位置。不过，你可以通过自定义插槽或者 CSS 来改变 select 组件的渲染位置。这里提供一种可能的解决方案，你可以尝试使用 Vue 的插槽功能来实现类似的效果。

首先，确保你已经安装了 Element UI 库。如果你还没有安装，可以使用 npm 或者 yarn 来安装：

npm install element-ui --save # 或者 yarn add element-ui

然后，在你的 Vue 组件中，你可以使用自定义插槽来挂载 select 组件到你指定的元素上。下面是一个简单的例子：

<template>
  <div>
    <!-- 指定元素，比如一个 div -->
    <div ref="customContainer">
      <!-- 使用自定义插槽挂载 select -->
      <el-select v-slot:prepend>
        <!-- 这里放置你的 select 选项等 -->
        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
      </el-select>
    </div>
  </div>
</template>

在这个例子中，el-select 是放在你指定的 div 元素内部（通过 v-slot:prepend）。这里的 prepend 是自定义插槽的名称，你也可以根据需要自定义其他的插槽名称或者直接省略插槽名。通过这样操作，select 组件就会渲染在你指定的 div 元素内部。当然，你也可以使用其他元素或者组件作为容器。如果你需要更复杂的布局或者样式调整，可能需要进一步定制插槽或者使用 CSS 来调整位置。这只是一个简单的例子，你需要根据具体的应用场景进行定制。 需要注意的是这个做法只是视觉上改变了组件的挂载位置，它的实际逻辑和事件处理还是在原来的位置进行的。如果需要彻底改变事件冒泡和捕获等行为的挂载位置，可能需要更深入的定制化或者引入额外的处理逻辑。希望这个例子能帮到你！如果有更多需求或问题，请继续提问。