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>