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


Posted in Javascript onMay 10, 2019

演示地址,打开、搜索、随便点

http://msisliao.github.io/dem...

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

<template>
 <div class='tpbox'>
 <el-select v-model="values" filterable placeholder="请选择" size="mini" clearable >
  <el-option v-for="item in filDatas" :key="item.BrandID" :label="item.BrandNames" :value="item.BrandNames" :value-key='item.BrandID'>
  </el-option>
 </el-select>
 <!-- 搜索的列表 -->
 <div v-if="values!=='' && values!==null ">
  <p class='ck-btn-box'>
  <el-button size="mini" @click="ckAll">{{allck?'取消全选':'全选'}}</el-button>
  </p>
  <ul>
  <li v-for="item in datas" :key="item.BrandID">
   <span>AA{{item.BrandTypeName}}</span>
   <span>BB{{item.BrandCName}}</span>
   <span>CC{{item.BrandName}}</span>
   <span>
   <el-checkbox v-model="item.ck" @change="handItem(item)">{{item.BrandNames}}</el-checkbox>
   </span>
  </li>
  </ul>

 </div>
 <!-- 默认列表 -->
 <ul v-else>
  <li v-for="item in datas" :key="item.BrandID">
  <span>AA{{item.BrandTypeName}}</span>
  <span>BB{{item.BrandCName}}</span>
  <span>CC{{item.BrandName}}</span>
  <span>
   <el-checkbox v-model="item.ck" @change="handItem(item)">{{item.BrandNames}}</el-checkbox>
  </span>
  </li>
 </ul>
 <p class='checked-box' v-if="this.arr.length>0">
  已选:
  <span @click="clearAll" class='clearll-txt'>清空</span>
  <el-tag v-for="tag in this.arr" :key="tag.BrandID" closable @close="handleClose(tag)" :disable-transitions=true>
  {{tag.BrandName}} / {{tag.BrandNames}}
  </el-tag>
 </p>
 </div>
</template>
<script>
export default {
 data() {
 return {
 allck: false, //控制全选 当没有任何操作时每次默认为 true
 ckarr: [], //每次搜索出来点击了复选框
 arr: [], //点击了input的数据 存放所有的已选
 values: "",
 listItem:{
 list: [
  {
  BrandTypeName: "大类1 建材/家居 ", //品牌正常
  BrandTypeID: 1,
  BrandCName: "中类1 建筑材料",
  BrandCID: 1,
  BrandName: "小类1 水泥",
  BransID: 1,
  BrandNames: "红水泥",
  BrandID: 1,
  ck: false
  },
  {
  BrandTypeName: "大类1 建材/家居 ", //品牌在多个小类里
  BrandTypeID: 1,
  BrandCName: "中类2 家私定制",
  BrandCID: 2,
  BrandName: "小类2 电饭煲",
  BransID: 2,
  BrandNames: "松下",
  BrandID: 2,
  ck: false
  },
  {
  BrandTypeName: "大类1 建材/家居 ",
  BrandTypeID: 1,
  BrandCName: "中类2 家私定制",
  BrandCID: 2,
  BrandName: "小类3 电压力锅",
  BransID: 3,
  BrandNames: "松下",
  BrandID: 3,
  ck: false
  },
  {
  BrandTypeName: "大类1 建材/家居 ", //品牌在多个中类小类里
  BrandTypeID: 1,
  BrandCName: "中类2 高档家具",
  BrandCID: 3,
  BrandName: "小类2 家具类",
  BransID: 4,
  BrandNames: "品牌",
  BrandID: 4,
  ck: false
  },
  {
  BrandTypeName: "大类1 建材/家居 ",
  BrandTypeID: 1,
  BrandCName: "中类2 豪华家具",
  BrandCID: 4,
  BrandName: "小类3 厨具类",
  BransID: 5,
  BrandNames: "品牌2",
  BrandID: 5,
  ck: false
  },
  {
  BrandTypeName: "大类1 装修/房产 ",
  BrandTypeID: 2,
  BrandCName: "中类2 豪华家具",
  BrandCID: 5,
  BrandName: "小类3 沙发类",
  BransID: 6,
  BrandNames: "品牌3",
  BrandID: 6,
  ck: false
  }
 ]
 }
 };
 },
 computed: {
 datas(){
 if(!this.values){
 return this.listItem.list
 }
 //每次搜索的数据
 if (this.values !== "") {
 return this.listItem.list.filter(item => {
  return item.BrandNames.includes(this.values);
 });
 } 
 },
 filDatas() {
 //select下拉菜单去重 相同名字的子选项会存放在多个类别里
 var obj = {};
 return this.listItem.list.reduce(function(item, next) {
 obj[next.BrandNames] ? "" : (obj[next.BrandNames] = true && item.push(next));
 return item;
 }, []);
 }
 },
 watch: {
 // 监听每次搜索时的数据变化
 datas: function(ary) {
 //搜索数据变化时 如果搜的结果全部是已选 第二次搜这个关键词就变成 取消选择
 if (this.values !== "") {
 this.allck = false; //默认每次搜索时是全选状态 需判断之前是否全选中的 有的话就是取消全选
  ary.every( item => { item.ck ? !this.allck : this.allck });
 // 将当前搜索列表的已选拿出来
 this.ckarr = this.datas.filter(item => {
  if (item.ck) { return item; }
 });
 }
 },
 // 监听每次搜索列表的数据是否全部为选中 判断已选的数据是不是等于当前搜索列表的数据
 ckarr: function() {
 if (this.values !== "") {
 this.ckarr.length == this.datas.length ? this.allck = true : this.allck = false; //如果已选等于当前搜索列表 改变全选状态
 }
 },

 },
 methods: {
 // 数据列表的复选框点击
 handItem(item) {
 if (item.ck) {
 this.arr.push(item); //arr是所有复选框的数据 存放在已选中
 this.ckarr.push(item); //ckarr是每次搜索列表点了复选框的数据 当取消全选时 在已选的大数组中删除 ckarr的数据
 } else {
 this.arr.splice(this.arr.indexOf(item), 1);
 this.ckarr.splice(this.arr.indexOf(item), 1);
 }
 },
 // 已选中的 单个删除
 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; }
 });
 },
 // 清空操作
 clearAll() {
 this.listItem.list.forEach(item => { item.ck = false; }); // 数据列表状态恢复
 this.arr = []; //已选全部清空 
 this.ckarr = [] // 当前搜索列表存放的已选全部清空
 this.allck = false; //全选状态恢复
 this.values='' //回到默认数据 
 },
 // 每次搜索列表的全选
 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 = []; //当前搜索列表为复选框的数据清空
 }
 },
 }
};
</script>
<style scoped>
.tpbox {
 background: #fff;
 padding: 30px;
 height: 500px;
}
 ul {
 margin-top: 15px;
 }
 li {
 justify-content: space-around;
 display: flex;
 line-height: 50px;
 color: #666;
 border-bottom: 1px solid #eee;

 }
 span {
 flex: 1;
 text-align: left;
 padding-left: 10px;
 }
 .checked-box {
 margin-top: 20px;
 
 }
 .el-tag {
 margin-left: 10px;
 }
 .clearll-txt {
 color: red;
 cursor: pointer;
 }
 .ck-btn-box {
 margin-top: 30px;
 }
</style>

总结

以上所述是小编给大家介绍的vue 实现搜索的结果页面支持全选与取消全选功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
newxtree.js代码
Mar 13 Javascript
设置iframe的document.designMode后仅Firefox中其body.innerHTML为br
Feb 27 Javascript
javascript中数组方法汇总
Jul 07 Javascript
javascript中checkbox使用方法简单实例演示
Nov 17 Javascript
angularjs创建弹出框实现拖动效果
Aug 25 Javascript
详解JavaScript UTC时间转换方法
Jan 07 Javascript
js中动态创建json,动态为json添加属性、属性值的实例
Dec 02 Javascript
关于jquery layui弹出层的使用方法
Apr 21 jQuery
JavaScript折半查找(二分查找)算法原理与实现方法示例
Aug 06 Javascript
BootStrap表单验证中的非Submit类型按钮点击时触发验证的坑
Sep 05 Javascript
vue使用Sass时报错问题的解决方法
Oct 14 Javascript
vue实现图片裁剪后上传
Dec 16 Vue.js
Vue项目中配置pug解析支持
May 10 #Javascript
Angular2实现的秒表及改良版示例
May 10 #Javascript
node中IO以及定时器优先级详解
May 10 #Javascript
使用Node.js写一个代码生成器的方法步骤
May 10 #Javascript
Easyui 去除jquery-easui tab页div自带滚动条的方法
May 10 #jQuery
使用vue脚手架(vue-cli)搭建一个项目详解
May 09 #Javascript
Node.js实现用户评论社区功能(体验前后端开发的乐趣)
May 09 #Javascript
You might like
php flush类输出缓冲剖析
2008/10/19 PHP
供参考的 php 学习提高路线分享
2011/10/23 PHP
phalcon框架使用指南
2016/02/23 PHP
微信支付开发订单查询实例
2016/07/12 PHP
PHP实现的一致性Hash算法详解【分布式算法】
2018/03/31 PHP
用JQuery 实现的自定义对话框
2007/03/24 Javascript
jQuery对表单的操作代码集合
2011/04/06 Javascript
js正则表达式中test,exec,match方法的区别说明
2014/01/29 Javascript
JS实现问卷星自动填问卷脚本并在两秒自动提交功能
2020/06/17 Javascript
使用JS判断页面是首次被加载还是刷新
2019/05/26 Javascript
layui实现二维码弹窗、并下载到本地的方法
2019/09/25 Javascript
jQuery实现视频展示效果
2020/05/30 jQuery
使用Pyrex来扩展和加速Python程序的教程
2015/04/13 Python
Python注释详解
2016/06/01 Python
python爬虫的工作原理
2017/03/05 Python
pthon贪吃蛇游戏详细代码
2019/01/27 Python
学python安装的软件总结
2019/10/12 Python
Python tkinter模版代码实例
2020/02/05 Python
Python 程序报错崩溃后如何倒回到崩溃的位置(推荐)
2020/06/23 Python
利用Python实现斐波那契数列的方法实例
2020/07/26 Python
python 如何对logging日志封装
2020/12/02 Python
html5 touch事件实现页面上下滑动效果【附代码】
2016/03/10 HTML / CSS
连卡佛中国官网:Lane Crawford中文站
2018/01/27 全球购物
欧洲领先的技术商店:eibmarkt.com
2019/05/10 全球购物
美国最好的葡萄酒网上商店:Wine Library
2019/11/02 全球购物
教师专业理论水平的自我评价分享
2013/11/09 职场文书
公司领导推荐信
2013/11/12 职场文书
结婚保证书范文
2014/04/29 职场文书
《中国梦我的梦》中学生演讲稿
2014/08/20 职场文书
工作疏忽、懈怠的检讨书
2014/09/11 职场文书
客服专员岗位职责范本
2015/04/07 职场文书
党员承诺书范文2015
2015/04/27 职场文书
初中英语教学随笔
2015/08/15 职场文书
奖学金主要事迹范文
2015/11/04 职场文书
PHP中国际化的字符串排序和比较对象详解
2021/08/23 PHP
SQL CASE 表达式的具体使用
2022/03/21 SQL Server