Vue应用中动态调整下拉选择框宽度以匹配子表格内容

<template>
  <div
    class="dropdown_grid"
    :class="{ 'my-dropdown--medium': true, 'is-open': isOpen }"
    ref="dropdownWrapper"
  >
    <!-- 下拉框的标题和切换按钮 -->
    <div @click="toggleDropdown">
      <span class="dropdown_title">选择表格数据</span>
      <span class="dropdown_arrow">▼</span>
    </div>

    <!-- 下拉框内容容器 -->
    <div
      v-if="isOpen"
      class="dropdown_grid_container"
      ref="floatingContainer"
      v-click-outside.anchor="closeDropdown"
    >
      <ul>
        <li>
          <!-- 你的表格组件，或者包裹表格的div -->
          <my-table
            :items="items"
            :headers="headers"
            single-select
            ref="myTableComponent"
          ></my-table>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import MyTable from './MyTable.vue'; // 假设你的表格组件路径
import ClickOutside from 'vue-click-outside'; // 假设你使用了v-click-outside指令

export default {
  components: {
    MyTable
  },
  directives: {
    ClickOutside
  },
  data() {
    return {
      isOpen: false,
      items: [
        // 示例数据
        { id: 1, name: '产品A', description: '这是产品A的详细描述，可能很长很长很长', price: 100 },
        { id: 2, name: '产品B', description: '产品B的简短描述', price: 200 },
        { id: 3, name: '产品C', description: '一个非常非常非常长的产品描述，用于测试表格宽度自适应的情况', price: 150 },
      ],
      headers: [
        { text: 'ID', value: 'id' },
        { text: '名称', value: 'name' },
        { text: '描述', value: 'description' },
        { text: '价格', value: 'price' },
      ],
      dropdownWidth: 'auto' // 用于动态设置下拉框宽度
    };
  },
  methods: {
    toggleDropdown() {
      this.isOpen = !this.isOpen;
      if (this.isOpen) {
        // 在DOM更新周期结束后执行宽度调整
        this.$nextTick(() => {
          this.adjustDropdownWidth();
        });
      }
    },
    closeDropdown() {
      this.isOpen = false;
    },
    adjustDropdownWidth() {
      // 确保表格组件和其内部DOM已渲染
      if (this.$refs.myTableComponent) {
        // 获取表格组件的根DOM元素
        // 注意：如果my-table组件内部有更具体的table元素，可能需要进一步访问
        // 例如：this.$refs.myTableComponent.$el.querySelector('table')
        const tableElement = this.$refs.myTableComponent.$el; // 假设my-table的根元素就是其宽度来源
        if (tableElement) {
          const tableWidth = tableElement.offsetWidth;
          // 将获取到的宽度应用到父级下拉框容器
          // 为了避免与CSS的min-width冲突，我们可以直接设置style属性
          // 或者确保JS设置的宽度能覆盖CSS
          this.$refs.dropdownWrapper.style.width = `${tableWidth}px`;
          // 也可以考虑设置dropdown_grid_container的min-width来确保内容完全显示
          this.$refs.floatingContainer.style.minWidth = `${tableWidth}px`;
        }
      }
    }
  },
  watch: {
    // 监听items变化，如果表格内容动态改变，可能需要重新调整宽度
    items: {
      deep: true,
      handler() {
        if (this.isOpen) {
          this.$nextTick(() => {
            this.adjustDropdownWidth();
          });
        }
      }
    }
  }
};
</script>

<style scoped>
.dropdown_grid {
  display: inline-block;
  position: relative;
  /* min-width: 150px; 这一行可能会被JS覆盖 */
  /* width: 100%; 这一行也会被JS覆盖 */
  color: #333333;
  cursor: pointer;
  /* 初始宽度可以设置为auto，让JS来控制 */
  width: auto;
}

.dropdown_grid_container {
  width: 100%; /* 这里设置为100%是相对于其父元素dropdown_grid的 */
  position: absolute;
  margin-top: -1px;
  min-width: 500px; /* 这个min-width可能会导致表格宽度小于500px时，容器仍然是500px */
  overflow-y: auto;
  background-color: #FFFFFF;
  border: 1px solid #959595;
  z-index: 200;
  max-height: 200px;
  padding: 8px 1px;
  margin-left: 2px;
  /* 移除或调整min-width，让JS来控制，或者确保JS设置的min-width能覆盖它 */
}

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

/* 简单的表格样式，用于演示 */
.my-table {
  width: auto; /* 确保表格自身宽度可以自适应内容 */
  border-collapse: collapse;
}
.my-table th, .my-table td {
  border: 1px solid #eee;
  padding: 8px;
  text-align: left;
  white-space: nowrap; /* 确保内容不换行，以体现宽度 */
}
</style>