如何在Vue表格的每一行中创建内嵌的下拉列表？

你遇到的position: absolute定位异常问题，通常是因为下拉列表的父级单元格（<td>）或者表格行（<tr>）没有设置position: relative，导致下拉的定位基准不是当前行/单元格，而是更外层的容器。

现成组件实现方案 #

主流Vue生态的组件库都已经内置处理了这类场景的定位逻辑，不需要你手动写定位规则：

• Element Plus / Element UI：组合使用el-table和el-select即可，直接把el-select写在表格列的自定义插槽里，下拉菜单默认会基于选择器本身自动定位，不会被表格内容截断
  示例代码：

  <template>
    <el-table :data="tableList" border>
      <el-table-column prop="itemName" label="项名称" />
      <el-table-column label="下拉选择">
        <template #default="{ row }">
          <el-select v-model="row.selectVal" placeholder="请选择选项">
            <el-option v-for="opt in optionList" :key="opt.value" :label="opt.label" :value="opt.value" />
          </el-select>
        </template>
      </el-table-column>
    </el-table>
  </template>
  

• Ant Design Vue：使用a-table搭配a-select，用法和上面一致，组件自带的定位逻辑已经兼容了表格内嵌的场景
• 轻量方案：如果不想引入全量组件库，可以使用vue-select这个独立下拉组件，同样支持直接嵌入表格单元格，自带的popper定位逻辑已经处理了父级参考的问题

手动实现的修复方案 #

如果要自己手写下拉组件，只要给下拉列表的直接父单元格添加position: relative样式，再给下拉列表设置足够高的z-index避免被其他行遮挡即可。

内容的提问来源于stack exchange，提问作者justyna