Vue.js 教程：实现下拉选择框宽度动态适配内部表格内容

<template>
  <div class="dropdown_grid my-dropdown--medium" :style="{ width: dropdownWidth }" ref="dropdownWrapper">
    <!-- 下拉框的显示部分，例如标题和切换按钮 -->
    <div @click="toggleDropdown" class="dropdown_header">
      <span>选择项目</span>
      <span class="arrow">▼</span>
    </div>

    <!-- 下拉框内容容器，当isOpen为true时显示 -->
    <div
      v-if="isOpen"
      class="dropdown_grid_container"
      ref="tableContainer"
      v-click-outside.anchor="close"
    >
      <ul>
        <li>
          <!-- 内部的表格组件 -->
          <my-table :items="items" :headers="headers" single-select></my-table>
        </li>
      </ul>
    </div>
  </div>
</template>

.dropdown_grid {
  display: inline-block; /* 允许元素根据内容或显式设置的宽度来调整自身大小 */
  position: relative;
  /* width: 100%; /* 移除此行，因为我们将通过JS动态设置宽度 */
  /* min-width: 150px; /* 可以保留作为下拉框显示部分的最小宽度 */
  color: #333333;
  cursor: pointer;
  border: 1px solid #ccc; /* 示例边框 */
  padding: 5px 10px;
}

.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;
  /* 确保内容容器能够根据其内部表格的宽度自由扩展 */
  white-space: nowrap; /* 如果表格内容不希望换行，可以添加此属性 */
  box-sizing: border-box; /* 确保padding和border计入元素总宽度 */
}

/* 确保 my-table 组件内部的布局也支持宽度自适应 */
/* 例如，在 my-table 的CSS中，如果列宽是固定的，确保总和能超出 min-width */

<script>
import MyTable from './MyTable.vue'; // 假设 MyTable 是一个独立的组件
// import vClickOutside from 'vue-click-outside'; // 如果你使用了vue-click-outside指令

export default {
  components: {
    MyTable,
  },
  // directives: {
  //   clickOutside: vClickOutside,
  // },
  data() {
    return {
      isOpen: false,
      dropdownWidth: 'auto', // 初始宽度设置为auto，或一个默认值
      items: [
        // 示例数据，用于 my-table
        { id: 1, name: '商品名称一，这是一个很长的商品描述，用于测试宽度', value: 100 },
        { id: 2, name: '商品名称二', value: 200 },
        { id: 3, name: '商品名称三，描述内容相对较长，以确保表格宽度足够', value: 300 },
      ],
      headers: [
        { text: 'ID', value: 'id' },
        { text: '名称', value: 'name' },
        { text: '价值', value: 'value' },
      ],
    };
  },
  methods: {
    toggleDropdown() {
      this.isOpen = !this.isOpen;
      if (this.isOpen) {
        // 使用 this.$nextTick 确保 DOM 已经更新并渲染了 tableContainer
        this.$nextTick(() => {
          this.adjustDropdownWidth();
        });
      }
    },
    close() {
      this.isOpen = false;
    },
    adjustDropdownWidth() {
      const tableContainer = this.$refs.tableContainer;
      if (tableContainer) {
        // 获取 tableContainer 的实际渲染宽度
        // offsetWidth 返回元素的整数像素宽度，包括内边距和边框
        // getBoundingClientRect().width 返回浮点数宽度，精度更高
        const desiredWidth = tableContainer.offsetWidth;

        // 应用宽度到 dropdownWrapper
        // 确保设置的宽度不小于下拉框显示部分的最小宽度（如果需要）
        const minHeaderWidth = this.$refs.dropdownWrapper.querySelector('.dropdown_header').offsetWidth;
        this.dropdownWidth = Math.max(desiredWidth, minHeaderWidth) + 'px';

        console.log('调整后的下拉框宽度为:', this.dropdownWidth);
      }
    },
    // 可选：处理窗口大小变化，重新计算宽度
    handleResize() {
      // 只有当下拉框打开时才重新计算宽度，避免不必要的性能开销
      if (this.isOpen) {
        // 考虑使用节流（throttle）或防抖（debounce）优化 resize 事件
        this.adjustDropdownWidth();
      }
    },
  },
  mounted() {
    // 挂载时添加窗口 resize 事件监听
    window.addEventListener('resize', this.handleResize);
  },
  beforeUnmount() {
    // 组件销毁前移除事件监听，防止内存泄漏
    window.removeEventListener('resize', this.handleResize);
  },
};
</script>

<!-- DropdownWithDynamicTable.vue -->
<template>
  <div class="dropdown_grid my-dropdown--medium" :style="{ width: dropdownWidth }" ref="dropdownWrapper">
    <div @click="toggleDropdown" class="dropdown_header">
      <span>{{ selectedItem ? selectedItem.name : '请选择项目' }}</span>
      <span class="arrow">▼</span>
    </div>

    <div
      v-if="isOpen"
      class="dropdown_grid_container"
      ref="tableContainer"
      v-click-outside.anchor="close"
    >
      <ul>
        <li>
          <my-table :items="items" :headers="headers" single-select @select="handleTableSelect"></my-table>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import MyTable from './MyTable.vue'; // 假设 MyTable 组件在同级目录下

// 假设 v-click-outside 指令的实现
const clickOutside = {
  beforeMount(el, binding) {
    el.clickOutsideEvent = function (event) {
      if (!(el === event.target || el.contains(event.target))) {
        binding.value();
      }
    };
    document.addEventListener('click', el.clickOutsideEvent);