Vue.js 中动态调整下拉框宽度以适应内嵌表格内容的教程

.dropdown_grid {
  min-width: 150px;
  width: 100%; /* 这里的100%是相对于其父元素 */
}

.dropdown_grid_container {
  width: 100%; /* 这里的100%是相对于 .dropdown_grid */
  min-width: 500px; /* 固定最小宽度 */
  /* ... 其他样式 ... */
}

<template>
  <div class="dropdown_grid my-dropdown--medium">
    <!-- 下拉框的标题和切换按钮等，这里假设有一个触发器来控制下拉框的显示/隐藏 -->
    <button @click="toggleDropdown">Toggle Dropdown</button>

    <!-- 下拉框容器，通过 :style 绑定动态宽度 -->
    <div
      v-show="isOpen" <!-- 假设通过 isOpen 控制显示隐藏 -->
      class="dropdown_grid_container"
      ref="dropdownContainer"
      v-ur-attach-root:fit
      v-click-outside.anchor="closeDropdown"
      :style="dropdownContainerStyle"
    >
      <ul>
        <li>
          <!-- 为 my-table 组件添加 ref -->
          <my-table :items="items" :headers="headers" single-select ref="myTable"></my-table>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    items: {
      type: Array,
      default: () => [],
    },
    headers: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      isOpen: false, // 控制下拉框的显示/隐藏
      dropdownContainerWidth: 'auto', // 存储动态计算的宽度
    };
  },
  computed: {
    // 动态样式计算属性
    dropdownContainerStyle() {
      return {
        width: this.dropdownContainerWidth,
      };
    },
  },
  methods: {
    // 切换下拉框显示状态的方法
    toggleDropdown() {
      this.isOpen = !this.isOpen;
      if (this.isOpen) {
        // 在下拉框显示后，等待DOM更新完成，再计算宽度
        this.$nextTick(() => {
          this.adjustDropdownWidth();
        });
      }
    },
    // 关闭下拉框的方法
    closeDropdown() {
      this.isOpen = false;
    },
    // 动态调整下拉框宽度的方法
    adjustDropdownWidth() {
      // 确保 myTable 引用存在
      if (this.$refs.myTable) {
        // 获取 my-table 组件的根 DOM 元素
        // 如果 my-table 内部直接是 <table> 标签，则直接使用 $el
        // 如果 my-table 内部有一个包裹 <table> 的 div，可能需要进一步查询
        const tableComponentEl = this.$refs.myTable.$el;

        // 尝试找到实际的 <table> 元素，如果 my-table 的根元素不是 <table>
        const actualTableEl = tableComponentEl.querySelector('table') || tableComponentEl;

        if (actualTableEl) {
          const tableWidth = actualTableEl.offsetWidth; // 获取表格的实际宽度
          // 将宽度应用到下拉框容器
          this.dropdownContainerWidth = `${tableWidth}px`;
        }
      }
    },
  },
  watch: {
    // 监听 isOpen 状态，确保在显示时重新计算宽度
    isOpen(newValue) {
      if (newValue) {
        this.$nextTick(() => {
          this.adjustDropdownWidth();
        });
      }
    },
    // 如果表格数据或表头可能导致宽度变化，也需要监听
    items: {
      deep: true,
      handler() {
        if (this.isOpen) {
          this.$nextTick(() => {
            this.adjustDropdownWidth();
          });
        }
      },
    },
    headers: {
      deep: true,
      handler() {
        if (this.isOpen) {
          this.$nextTick(() => {
            this.adjustDropdownWidth();
          });
        }
      },
    },
  },
  // 也可以在 mounted 钩子中添加 resize 事件监听器，以应对窗口大小变化
  mounted() {
    window.addEventListener('resize', this.handleResize);
  },
  beforeUnmount() {
    window.removeEventListener('resize', this.handleResize);
  },
  methods: {
    // ... 其他方法 ...
    handleResize() {
      if (this.isOpen) {
        this.adjustDropdownWidth();
      }
    },
  },
};
</script>

.dropdown_grid_container {
  /* 移除 width: 100%; 或将其设置为 auto，让 JS 来控制 */
  width: auto; /* 初始值，JS会覆盖它 */
  min-width: 500px; /* 作为一个最小宽度保障 */
  position: absolute;
  margin-top: -1px;
  overflow-y: auto;
  background-color: #FFFFFF;
  border: 1px solid #959595;
  z-index: 200;
  max-height: 200px;
  padding: 8px 1px;
  margin-left: 2px;
}