如何根据子表宽度设置 select 框宽度 - css

Question

在我的 vue 应用程序中，我设计了一个带有表格组件的 select 盒子。 单击 select 框时，表格在容器中可见。 现在，问题是我无法根据表格宽度设置 select 框的动态宽度。

现在，由于 select 框的固定宽度，表格行重叠。 它正在向上打开容器。 由于宽度，有一个滚动。

这是我的代码

    <div class="dropdown_grid my-dropdown--medium>
 ... div related to title and toggle
 
 // here is the container
 <div
      class="dropdown_grid_container"
      ref="floating"
      v-ur-attach-root:fit
      v-click-outside.anchor="close"
    >
    <ul><li><my-table :items="items" :headers="headers"
                    single-select></my-table></li></ul>
    </div>
</div>

Css 供这个

    .dropdown_grid {
  display: inline-block;
  position: relative;
  min-width: 150px;
  width: 100%;
  color: #333333;
  cursor: pointer;
}

.dropdown_grid_container {
  width: 100%;
  position: absolute;
  margin-top: -1px;
  min-width: 500px;
  overflow-y: auto;
  background-color: #FFFFFF;
  border: 1px solid #959595;
  z-index: 200;
  max-height: 200px;
  padding: 8px 1px;
  margin-left: 2px;
}

.my-dropdown--medium {
  font-size: 14px;
  line-height: 24px;
  height: 32px

我看过多篇关于此的帖子，但无法设置它的动态宽度。 如何根据子宽度使其动态化？

Answer 1

由于您拥有元素的 class 或 ID，因此您可以使用 document.getElemnt 函数访问宽度。 因此，您可以在打开表格或显示表格时定义 function，然后通过文档函数访问表格的宽度并将其分配给您想要的任何元素。