el-menui table行下拉框查询

### Element UI 中 `el-menu` 和 `table` 联动并添加行下拉框查询功能 为了实现 `el-menu` 与表格 (`el-table`) 的联动以及在表格中每行添加下拉框的功能，可以按照以下方式设计： #### 1. **菜单与表格联动** 通过监听 `el-menu` 的点击事件，获取对应的菜单项数据，并将其作为筛选条件传递给表格组件。可以通过设置全局变量或 Vuex 来管理状态。 ```javascript // Vue 方法部分 handleMenuSelect(key) { this.menuKey = key; // 将选中的菜单键存储起来 this.filterTableData(); // 过滤表格数据 }, filterTableData() { if (!this.menuKey) return; this.filteredRows = this.tableData.filter(row => row.category === this.menuKey); } ``` 当用户点击某个菜单项时，调用上述方法更新过滤后的表格数据[^1]。 --- #### 2. **表格行下拉框的实现** 对于每一行的数据，在模板中嵌入一个 `el-dropdown` 下拉框，并绑定其可见性变化事件以动态调整样式或其他逻辑操作。 ##### HTML 部分 ```html <el-table :data="filteredRows"> <el-table-column prop="name" label="名称"></el-table-column> <el-table-column prop="category" label="分类"></el-table-column> <el-table-column label="操作"> <template #default="scope"> <el-dropdown @visible-change="onDropdownVisibleChange(scope.row)"> <span class="dropdown-trigger">更多选项</span> <template #dropdown> <el-dropdown-menu> <el-dropdown-item>编辑</el-dropdown-item> <el-dropdown-item>删除</el-dropdown-item> </el-dropdown-menu> </template> </el-dropdown> </template> </el-table-column> </el-table> ``` ##### JavaScript 部分 ```javascript onDropdownVisibleChange(row, visible) { if (visible) { const triggerEl = document.querySelector('.dropdown-trigger'); if (triggerEl) { triggerEl.classList.add('active'); // 修改触发元素样式 } } else { const triggerEl = document.querySelector('.dropdown-trigger'); if (triggerEl) { triggerEl.classList.remove('active'); // 移除触发元素样式 } } } ``` 此代码片段实现了如下功能： - 当下拉框展开时，找到对应触发按钮并为其应用特定 CSS 类。 - 关闭下拉框时移除该类恢复原样。 --- #### 3. **动态绑定下拉框内容** 如果需要根据当前行的内容动态生成下拉框内的选项，则可以在 `@command` 或其他交互事件中处理相关内容。 例如，假设我们希望基于某列值填充下拉列表： ```javascript getDynamicOptions(row) { let options = []; switch (row.type) { case 'A': options = [{ value: 'option1', label: 'Option One' }, { value: 'option2', label: 'Option Two' }]; break; default: options = [{ value: 'defaultOpt', label: 'Default Option' }]; } return options; } renderDropdownContent(h, scopeRow) { const options = this.getDynamicOptions(scopeRow); return ( <el-dropdown-menu> {options.map(opt => ( <el-dropdown-item command={opt.value}>{opt.label}</el-dropdown-item> ))} </el-dropdown-menu> ); } ``` 此处利用了 Vue 的渲染函数特性来构建动态内容[^2]。 --- ### 完整示例代码 以下是综合以上各部分内容的一个简单实例： ```vue <template> <div> <!-- Menu --> <el-menu mode="horizontal" @select="handleMenuSelect"> <el-menu-item index="1">类别一</el-menu-item> <el-menu-item index="2">类别二</el-menu-item> </el-menu> <!-- Table with dropdowns --> <el-table :data="filteredRows"> <el-table-column prop="name" label="名称"></el-table-column> <el-table-column prop="category" label="分类"></el-table-column> <el-table-column label="操作"> <template #default="scope"> <el-dropdown @visible-change="onDropdownVisibleChange(scope.row)"> <span class="dropdown-trigger">更多...</span> <template #dropdown> <el-dropdown-menu> <el-dropdown-item>查看详情</el-dropdown-item> <el-dropdown-item divided>删除记录</el-dropdown-item> </el-dropdown-menu> </template> </el-dropdown> </template> </el-table-column> </el-table> </div> </template> <script> export default { data() { return { menuKey: '', tableData: [ { name: 'Item A', category: '1' }, { name: 'Item B', category: '2' }, { name: 'Item C', category: '1' } ], filteredRows: [] }; }, methods: { handleMenuSelect(key) { this.menuKey = key; this.filterTableData(); }, filterTableData() { if (!this.menuKey) return; this.filteredRows = this.tableData.filter(row => row.category === this.menuKey); }, onDropdownVisibleChange(row, visible) { if (visible) { const triggerEl = document.querySelector('.dropdown-trigger'); if (triggerEl) { triggerEl.classList.add('highlighted'); // 自定义样式 } } else { const triggerEl = document.querySelector('.dropdown-trigger'); if (triggerEl) { triggerEl.classList.remove('highlighted'); } } } }, created() { this.filteredRows = [...this.tableData]; } }; </script> <style scoped> .dropdown-trigger.highlighted { color: blue !important; font-weight: bold; } </style> ``` --- ###