大橙子网站建设,新征程启航
为企业提供网站建设、域名注册、服务器等服务
这篇文章主要介绍了vue如何实现搜索的结果页面支持全选与取消全选功能,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。
创新互联公司-专业网站定制、快速模板网站建设、高性价比掇刀网站开发、企业建站全套包干低至880元,成熟完善的模板库,直接使用。一站式掇刀网站制作公司更省心,省钱,快速模板网站建设找我们,业务覆盖掇刀地区。费用合理售后完善,十载实体公司更值得信赖。
npm i element-ui -S
// main.js import ElementUI from 'element-ui' import 'element-ui/lib/theme-chalk/index.css' Vue.use(ElementUI)
demo功能概览
默认没有全选,搜索时支持全选与取消全选,
将选择的数据添加到已选中,已选删除时改变当前搜索列表的状态与全选按钮的状态
全选时全部追加到已选,取消全选时从已选中删除当前搜索的列表
功能列表
1、搜索时展示相应的数据列表,支持全选与取消全选,(默认展示所有数据时不支持全选)
datas() { // 每次搜索的数据 根据下拉菜单的值的变化 if (this.value !== "") { return this.listItem.list.filter(item => { return item.BrandNames.includes(this.value); }); } else { return this.listItem.list; // 没有搜索的关键词时展示全部数据 } },
2、搜索的下拉菜单去重
filDatas() { // 利用reduce 下拉菜单去重 var obj = {}; return this.listItem.list.reduce(function(item, next) { obj[next.BrandNames] ? "" : (obj[next.BrandNames] = true && item.push(next)); return item; }, []); }
3、当前界面全选时添加到已选中,当前界面取消全选时,从已选的数据删除当前搜索出来的列表数据,
// 每次搜索列表的全选 与 取消全选 ckAll() { this.allck = !this.allck; //点击全选 变 取消选择 let arrys = []; //存放复选框为取消状态的数据 if (this.allck) { // 将当前搜索的列表数据追加到已选中 this.datas.forEach(item => { item.ck = true; if (!this.arr.includes(item)) { // 追加复选框为false的数据 this.arr.push(item); this.ckarr.push(item); } }); } else { this.datas.forEach(item => { item.ck = false; }); //当前搜索的数据列表复选框设为取消状态 arrys = this.datas.filter(item => { return !item.ck; }); //把复选框为false的数据 拿出来 this.datas.forEach(items => { //已选那里删除当前搜索列表复选框为false的数据 arrys.forEach(item => { if (item.BrandID == items.BrandID) { this.arr.splice(this.arr.indexOf(item), 1);} }); }); this.ckarr = []; //当前搜索列表为复选框的数据清空 } },
4、列表选中时添加到已选,全部选中时改变全选状态(变取消全选)
// 监听当前搜索列表的勾选数据 ckarr: function() { if (this.value !== "") { this.ckarr.length == this.datas.length ? this.allck = true : this.allck = false; //如果已选等于当前搜索列表 改变全选状态 } }
5、在已选中操作删除时,如果删除的是当前搜索的列表,当前全选改变状态,如果删除的非当前搜索列表,当前全选状态不变(这里有点绕)
handleClose(tag) { this.arr.splice(this.arr.indexOf(tag), 1); // 点哪删哪 this.ckarr.forEach(items => { // 判断删除的是否是当前搜索列表的数据 是的话改变全选状态 if (items.BrandID == tag.BrandID) { this.ckarr.splice(this.ckarr.indexOf(tag), 1); } }); this.listItem.list.forEach(items => { // 删除已选时改变数据列表状态 if (items.BrandID == tag.BrandID) { items.ck = false; } }); },
app.vue
{{allck?'取消全选':'全选'}}
- AA{{item.BrandTypeName}} BB{{item.BrandCName}} CC{{item.BrandName}}
{{item.BrandNames}}
- AA{{item.BrandTypeName}} BB{{item.BrandCName}} CC{{item.BrandName}}
{{item.BrandNames}} 0"> 已选: 清空
{{tag.BrandName}} / {{tag.BrandNames}}
Vue是一款友好的、多用途且高性能的JavaScript框架,使用vue可以创建可维护性和可测试性更强的代码库,Vue允许可以将一个网页分割成可复用的组件,每个组件都包含属于自己的HTML、CSS、JavaScript,以用来渲染网页中相应的地方,所以越来越多的前端开发者使用vue。
感谢你能够认真阅读完这篇文章,希望小编分享的“vue如何实现搜索的结果页面支持全选与取消全选功能”这篇文章对大家有帮助,同时也希望大家多多支持创新互联,关注创新互联行业资讯频道,更多相关知识等着你来学习!