vxe ui ,vue3 ,js完成一个用户多选功能，可以筛选部门和状态，可以搜索，可以重置，表格分页，选取出来的在旁边显示出来，点击可删除

<think>嗯，用户想要用vxe UI、Vue3和JavaScript实现一个用户多选功能，包含部门、状态筛选，搜索，重置，表格分页，选取结果在旁边显示并可删除。首先，我需要理清楚各个功能模块之间的关系以及如何整合vxe-table组件。 用户可能不太熟悉vxe-table的具体用法，所以需要先确保正确引入组件和设置表格数据。然后，考虑筛选条件部分，部门应该是下拉选择，状态可能用单选或多选。搜索功能需要处理输入事件，可能用防抖优化性能。重置按钮要清空所有筛选条件和搜索关键词。 表格分页方面，vxe-table支持分页配置，需要设置currentPage和pageSize，并处理分页事件。多选功能需要配置复选框，并且监听选中事件，将选中的用户添加到结果列表中。旁边显示已选用户，并且每个条目可以点击删除，这可能用到数组的过滤或splice方法。 需要注意的地方包括：数据绑定是否正确，筛选逻辑是否同时处理部门和状态，搜索是否实时更新，分页切换时保持选中状态可能需要唯一键。此外，已选列表的显示需要实时更新，删除功能要同步到表格的选中状态。可能还需要处理跨页选中的情况，确保数据一致性。 最后，代码结构要清晰，将模板、脚本和样式分开，确保响应式数据正确，方法函数处理事件和逻辑。可能需要使用计算属性来处理过滤后的表格数据，以提高性能。检查所有功能是否覆盖用户需求，并进行测试验证。</think>以下是用 `vxe-table` + Vue3 实现用户多选功能的完整解决方案： ```html <template> <div class="container"> <!-- 筛选条件区 --> <div class="filter-area"> <el-select v-model="filter.dept" placeholder="选择部门" clearable> <el-option v-for="item in departments" :key="item.value" :label="item.label" :value="item.value" /> </el-select> <el-select v-model="filter.status" placeholder="选择状态" clearable> <el-option v-for="item in statusOptions" :key="item.value" :label="item.label" :value="item.value" /> </el-select> <el-input v-model="searchKey" placeholder="搜索姓名" clearable @input="handleSearch" /> <el-button @click="resetFilters">重置</el-button> </div> <!-- 数据表格 --> <vxe-table ref="tableRef" :data="filteredData" border height="500" @checkbox-change="handleSelectionChange" @checkbox-all="handleSelectionChange" > <vxe-column type="checkbox" width="60"></vxe-column> <vxe-column field="name" title="姓名"></vxe-column> <vxe-column field="dept" title="部门"></vxe-column> <vxe-column field="status" title="状态"></vxe-column> </vxe-table> <!-- 分页 --> <vxe-pager v-model:current-page="pagination.current" v-model:page-size="pagination.size" :total="pagination.total" @page-change="handlePageChange" /> <!-- 已选展示区 --> <div class="selected-area"> <h4>已选用户 ({{ selectedUsers.length }})</h4> <div v-for="user in selectedUsers" :key="user.id" class="selected-item" @click="removeSelected(user)" > {{ user.name }} ({{ user.dept }}) <span class="close-icon">×</span> </div> </div> </div> </template> <script setup> import { ref, computed, onMounted } from 'vue' // 模拟数据 const mockData = Array.from({ length: 100 }, (_, i) => ({ id: i + 1, name: `用户${i + 1}`, dept: ['技术部', '市场部', '财务部'][i % 3], status: ['在职', '离职'][i % 2] })) // 响应式数据 const filter = ref({ dept: null, status: null }) const searchKey = ref('') const selectedUsers = ref([]) const tableRef = ref(null) // 分页配置 const pagination = ref({ current: 1, size: 10, total: computed(() => filteredData.value.length) }) // 选项数据 const departments = [ { value: '技术部', label: '技术部' }, { value: '市场部', label: '市场部' }, { value: '财务部', label: '财务部' } ] const statusOptions = [ { value: '在职', label: '在职' }, { value: '离职', label: '离职' } ] // 计算过滤后的数据 const filteredData = computed(() => { return mockData.filter(item => { const matchDept = !filter.value.dept || item.dept === filter.value.dept const matchStatus = !filter.value.status || item.status === filter.value.status const matchSearch = item.name.includes(searchKey.value) return matchDept && matchStatus && matchSearch }) }) // 处理选中 const handleSelectionChange = ({ records }) => { selectedUsers.value = [...new Set([...selectedUsers.value, ...records])] } // 删除已选 const removeSelected = user => { selectedUsers.value = selectedUsers.value.filter(u => u.id !== user.id) tableRef.value.setCheckboxRow(user, false) } // 重置筛选 const resetFilters = () => { filter.value = { dept: null, status: null } searchKey.value = '' } // 分页处理 const handlePageChange = ({ currentPage, pageSize }) => { pagination.value.current = currentPage pagination.value.size = pageSize } </script> <style scoped> .container { display: flex; gap: 20px; } .filter-area { margin-bottom: 20px; display: flex; gap: 10px; } .selected-area { width: 300px; border-left: 1px solid #eee; padding-left: 20px; } .selected-item { padding: 8px; margin: 4px 0; background: #f5f7fa; border-radius: 4px; cursor: pointer; display: flex; justify-content: space-between; align-items: center; } .close-icon { color: #999; font-size: 18px; } .close-icon:hover { color: #666; } </style> ``` --- ### 功能解析 1. **筛选系统** $$筛选条件 = 部门选择 \cap 状态选择 \cap 关键词匹配$$ - 使用组合式 computed 实现实时过滤 - 部门/状态选择器采用 Element Plus 组件 2. **多选逻辑** ```javascript // 处理复选框变化 const handleSelectionChange = ({ records }) => { selectedUsers.value = [...new Set([...selectedUsers.value, ...records])] } ``` - 使用 Set 自动去重 - 兼容全选/单选操作 3. **分页集成** ```html <vxe-pager v-model:current-page="pagi