<template> <div class="box"> <!-- Filter Section --> <div class="main-header"> <div class="left-filters"> <!-- Search Box --> <el-input v-model="searchField" placeholder="搜索主机IP或文件夹名称" clearable style="width: 250px; margin-right: 20px;" :resizable="false" /> <el-button type="primary" @click="filterTable">搜索</el-button> <!-- Dropdown Filter --> <el-dropdown trigger="click" class="dropdown"> <el-button type="primary"> 主机IP筛选 <el-icon><arrow-down /></el-icon> </el-button> <template #dropdown> <el-dropdown-menu> <el-dropdown-item @click="selectedIP = 'all'; filterTable()">全部主机</el-dropdown-item> <el-dropdown-item v-for="ip in uniqueIPs" :key="ip" @click="selectedIP = ip; filterTable()" > {{ ip }} </el-dropdown-item> </el-dropdown-menu> </template> </el-dropdown> </div> <!-- Add Button --> <el-button type="primary" @click="openModal" class="add-button">新增</

### 使用 Vue.js 和 Element Plus 实现搜索框、下拉筛选和新增按钮功能 以下是通过 Vue.js 和 Element Plus 组件库实现的一个示例，展示如何集成搜索框、下拉筛选和新增按钮的功能。 #### HTML 结构 ```html <template> <div class="search-container"> <!-- 搜索框 --> <el-input v-model="searchQuery" placeholder="请输入关键词..." clearable @change="handleSearch"></el-input> <!-- 下拉筛选 --> <el-select v-model="selectedOption" placeholder="请选择选项" style="margin-left: 10px;" @change="handleFilter"> <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </el-option> </el-select> <!-- 新增按钮 --> <el-button type="primary" icon="el-icon-plus" style="margin-left: 10px;" @click="openAddDialog">新增</el-button> <!-- 表格数据 --> <el-table :data="filteredData" border stripe style="width: 100%; margin-top: 20px;"> <el-table-column prop="name" label="名称" width="180"></el-table-column> <el-table-column prop="category" label="类别" width="180"></el-table-column> <el-table-column prop="description" label="描述"></el-table-column> </el-table> <!-- 分页 --> <el-pagination background layout="prev, pager, next" :total="tableData.length" style="margin-top: 20px;" @current-change="handlePageChange"> </el-pagination> </div> </template> ``` #### JavaScript 部分 ```javascript <script lang="ts" setup> import { ref, computed } from 'vue'; // 数据源 const tableData = [ { name: 'Item A', category: 'Category 1', description: 'Description of Item A' }, { name: 'Item B', category: 'Category 2', description: 'Description of Item B' }, { name: 'Item C', category: 'Category 1', description: 'Description of Item C' } ]; // 搜索关键字绑定 const searchQuery = ref(''); // 下拉菜单选项 const options = [ { value: '', label: '全部' }, { value: 'Category 1', label: '分类一' }, { value: 'Category 2', label: '分类二' } ]; const selectedOption = ref(''); // 过滤后的表格数据 const filteredData = computed(() => { return tableData.filter(item => item.name.includes(searchQuery.value) && (selectedOption.value === '' || item.category === selectedOption.value) ); }); // 处理搜索逻辑 function handleSearch() { console.log('当前搜索词:', searchQuery.value); } // 处理筛选逻辑 function handleFilter() { console.log('当前选中的筛选项:', selectedOption.value); } // 打开新增对话框 function openAddDialog() { alleet('打开新增对话框'); } </script> ``` --- ### 功能说明 1. **搜索框** 用户可以通过输入框实时过滤表格数据。`v-model` 将用户的输入值绑定到 `searchQuery` 变量，并通过计算属性 `filteredData` 对原始数据进行动态过滤[^1]。 2. **下拉筛选** 提供了一个下拉菜单用于选择不同的分类条件。当用户改变选项时，触发 `@change` 事件并更新 `selectedOption` 的值，从而重新计算过滤后的数据[^3]。 3. **新增按钮** 当点击“新增”按钮时，调用 `openAddDialog` 方法来执行相应的业务逻辑（例如弹出一个模态框）。这里为了简化演示仅使用了 `alleet` 函数模拟行为[^1]。 4. **表格渲染** 利用了 `el-table` 来展示经过过滤的数据集合 `filteredData`。每一列都绑定了对应字段名作为其显示的内容[^1]。 5. **分页支持** 添加了基础的分页控件以便于处理大规模数据集的情况。注意实际应用中还需要考虑服务端请求等问题[^2]。 --- ###