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 相关文章推荐
jQuery bind事件使用详解
May 05 Javascript
JS操作Cookies包括(读取添加与删除)
Dec 26 Javascript
浅析js中取绝对值的2种方法
Jul 09 Javascript
JS 对象属性相关(检查属性、枚举属性等)
Apr 05 Javascript
JS不用正则验证输入的字符串是否为空(包含空格)的实现代码
Jun 14 Javascript
返回函数的JavaScript函数
Jun 14 Javascript
利用JS如何计算字符串所占字节数示例代码
Sep 13 Javascript
vue.js中引入vuex储存接口数据及调用的详细流程
Dec 14 Javascript
常用的9个JavaScript图表库详解
Dec 19 Javascript
layui扩展上传组件模拟进度条的方法
Sep 23 Javascript
使用vue实现HTML页面生成图片的方法
Mar 12 Javascript
vue 获取url参数、get参数返回数组的操作
Nov 12 Javascript
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
十大“创意”战术!
2020/03/04 星际争霸
PHP合并discuz用户脚本的方法
2015/08/04 PHP
php基于自定义函数记录log日志方法
2017/07/21 PHP
php文件包含的几种方式总结
2019/09/19 PHP
JS 实现Table相同行的单元格自动合并示例代码
2013/08/27 Javascript
基于bootstrap3和jquery的分页插件
2015/07/31 Javascript
JQuery日期插件datepicker的使用方法
2016/03/03 Javascript
vue-resource 拦截器使用详解
2017/02/21 Javascript
基于vue 实现token验证的实例代码
2017/12/14 Javascript
详解webpack+express多页站点开发
2017/12/22 Javascript
浅谈Webpack下多环境配置的思路
2018/06/27 Javascript
element-ui 表格数据时间格式化的方法
2018/08/24 Javascript
微信小程序开发实现的选项卡(窗口顶部/底部TabBar)页面切换功能图文详解
2019/05/14 Javascript
webpack项目使用eslint建立代码规范实现
2019/05/16 Javascript
VUE DEMO之模拟登录个人中心页面之间数据传值实例
2019/10/31 Javascript
小程序如何自主实现拦截器的示例代码
2019/11/04 Javascript
jQuery弹框插件使用方法详解
2020/05/26 jQuery
探究Python的Tornado框架对子域名和泛域名的支持
2015/05/02 Python
Python 实现简单的电话本功能
2015/08/09 Python
Python脚本暴力破解栅栏密码
2015/10/19 Python
Python中列表元素转为数字的方法分析
2016/06/14 Python
Python虚拟环境项目实例
2017/11/20 Python
详解windows python3.7安装numpy问题的解决方法
2018/08/13 Python
使用Python+wxpy 找出微信里把你删除的好友实例
2019/02/21 Python
python自制包并用pip免提交到pypi仅安装到本机【推荐】
2019/06/03 Python
详解python解压压缩包的五种方法
2019/07/05 Python
python使用socket 先读取长度,在读取报文内容示例
2019/09/26 Python
Pytorch to(device)用法
2020/01/08 Python
Django如何使用jwt获取用户信息
2020/04/21 Python
使用CSS3创建动态菜单效果
2015/07/10 HTML / CSS
美国综合购物商城:UnbeatableSale.com
2018/11/28 全球购物
墨尔本最受欢迎的复古风格品牌:Princess Highway
2018/12/21 全球购物
开办加工厂创业计划书
2014/01/03 职场文书
求职信结尾怎么写
2014/05/26 职场文书
2014年林业工作总结
2014/12/05 职场文书
postgresql之greenplum字符串去重拼接方式
2023/05/08 PostgreSQL