vue点击下拉框弹出表格

### Vue 中点击 Dropdown 下拉框弹出 Table 表格的实现 为了实现在 Vue 中点击 `el-dropdown` 后显示一个表格，可以采用如下方式： #### HTML 结构 定义一个按钮触发下拉菜单，并在其中放置一个自定义的内容区域用于展示表格。 ```html <template> <div class="example"> <!-- 触发器 --> <el-dropdown trigger="click" @command="handleCommand"> <span class="el-dropdown-link">点击此处<i class="el-icon-arrow-down el-icon--right"></i></span> <!-- 自定义内容插槽 --> <template #dropdown> <el-dropdown-menu> <!-- 使用 visible 属性控制表格可见性 --> <el-dropdown-item command="showTable"><el-table :data="tableData" style="width: 100%" v-if="isShowTable"> <el-table-column prop="date" label="日期" width="180"></el-table-column> <el-table-column prop="name" label="姓名" width="180"></el-table-column> <el-table-column prop="address" label="地址"></el-table-column> </el-table></el-dropdown-item> </el-dropdown-menu> </template> </el-dropdown> </div> </template> ``` #### JavaScript 部分 通过命令来切换表格的显示状态。 ```javascript <script> export default { data() { return { isShowTable: false, tableData: [{ date: '2016-05-03', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄' }, { date: '2016-05-02', name: '王小虎', address: '上海市普陀区金沙江路 1517 弄' }] }; }, methods: { handleCommand(command) { this.isShowTable = !this.isShowTable; } } }; </script> ``` 此方案利用了 Element UI 的组件特性，即可以通过设置 `v-if` 来动态管理 DOM 元素的存在与否[^2]。当用户点击下拉项时，会调用相应的处理函数改变布尔变量的状态从而达到隐藏或显示表格的效果。