vue 实现搜索的结果页面支持全选与取消全选功能

在Vue.js中实现搜索结果页面的全选与取消全选功能是一项常见的需求，尤其是在涉及到大量数据筛选和管理的场景。以下将详细介绍如何实现这一功能。 我们需要引入一个UI库，例如Element UI，它提供了丰富的组件，包括复选框，这对于实现全选/取消全选功能非常有用。在`main.js`文件中进行以下配置： ```javascript npm i element-ui -S // main.js import ElementUI from 'element-ui' import 'element-ui/lib/theme-chalk/index.css' Vue.use(ElementUI) ``` 接着，我们创建一个Vue实例，包含搜索结果的数据以及已选中的数据。假设我们有一个名为`listItem`的对象，其中包含一个`list`属性，存储着所有数据。另外，我们还需要一个数组`arr`来存储已选中的数据，以及一个`allck`变量来追踪全选状态。 ```javascript data() { return { listItem: { list: [/* 搜索结果数据 */] }, arr: [], // 已选中的数据 allck: false, // 全选状态 value: '' // 搜索关键词 } }, ``` 1. **搜索时展示数据**：当搜索关键词改变时，根据关键词过滤`listItem.list`，并返回结果。同时，如果未输入关键词，则显示所有数据。在`methods`对象中定义一个`datas`方法： ```javascript methods: { datas() { if (this.value !== "") { return this.listItem.list.filter(item => item.BrandNames.includes(this.value)); } else { return this.listItem.list; } }, } ``` 2. **搜索下拉菜单去重**：如果需要在下拉菜单中去重，可以创建一个`filDatas`方法，利用`reduce`函数去除重复的`BrandNames`： ```javascript methods: { filDatas() { const obj = {}; return this.listItem.list.reduce((item, next) => { if (!obj[next.BrandNames]) { obj[next.BrandNames] = true; item.push(next); } return item; }, []); }, } ``` 3. **全选与取消全选**：定义一个`ckAll`方法，处理全选与取消全选的操作。当点击全选按钮时，将当前搜索结果的数据添加到已选中，反之则从已选中移除： ```javascript methods: { ckAll() { this.allck = !this.allck; let arrys = []; if (this.allck) { this.datas.forEach(item => { item.ck = true; if (!this.arr.includes(item)) { this.arr.push(item); this.ckarr.push(item); } }); } else { this.datas.forEach(item => item.ck = false); arrys = this.datas.filter(item => !item.ck); this.datas.forEach(items => { arrys.forEach(item => { if (item.BrandID == items.BrandID) { this.arr.splice(this.arr.indexOf(item), 1); } }); }); this.ckarr = []; } }, } ``` 4. **监听列表选中**：在`ckarr`计算属性中，监控当前搜索列表的勾选状态，如果已选中的数量等于当前搜索结果的数量，全选按钮应该被设置为选中状态，反之则设置为未选中： ```javascript computed: { ckarr() { if (this.value !== "") { this.ckarr.length == this.datas.length ? this.allck = true : this.allck = false; } } } ``` 5. **已选中操作删除**：在已选中列表中删除某项时，需要更新全选状态。定义一个`handleClose`方法，判断被删除的项是否属于当前搜索结果，然后相应地改变全选状态： ```javascript methods: { handleClose(tag) { this.arr.splice(this.arr.indexOf(tag), 1); this.ckarr.forEach(items => { if (items.BrandID == tag.BrandID) { this.allck = false; } }); } } ``` 在模板中，我们可以使用Element UI的`<el-checkbox-group>`和`<el-checkbox>`组件来创建复选框，并绑定`ckAll`方法和`ckarr`计算属性。同时，使用`v-model`双向绑定`allck`来控制全选按钮的状态。 ```html <template> <!-- ... --> <el-checkbox-group v-model="allck" @change="ckAll"> <el-checkbox v-for="(item, index) in datas" :key="index" :label="item.BrandNames" :value="item"></el-checkbox> </el-checkbox-group> <!-- ... --> <ul> <li v-for="(selectedItem, index) in arr" :key="index"> {{ selectedItem.BrandNames }} <button @click="handleClose(selectedItem)">删除</button> </li> </ul> <!-- ... --> </template> ``` 以上就是一个基本的Vue.js实现搜索结果页面全选与取消全选功能的完整示例。它涵盖了从数据筛选、去重、全选逻辑到已选中列表的管理，确保了功能的完整性和准确性。在实际应用中，可能还需要考虑其他细节，如分页、异步加载数据等，但以上代码提供了实现这一功能的基本框架。