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

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

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 实现搜索的结果页面支持全选与取消全选功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对我们网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

(0)

相关推荐

  • 利用Vue.js指令实现全选功能

    因为刚开始接触vue不久,全选的实现参考了知乎上的实现方法: 1.从服务器拿到数据,为每个item设置checked属性 2.计算选中的数量selectCount,如果选中的数量与selectItems的数量相等,则全选selectAll选中 3.点全选时,将每个item的checked属性置为true,反选时置为false, 4.每次selectItems的属性发生变化时,都将checked的为true的item放入数组checkedGroups中 下面为实现代码: //全选 data: fu

  • vue2.0在table中实现全选和反选的示例代码

    其实在去年小颖已经写过一篇:Vue.js实现checkbox的全选和反选 小颖今天在跟着慕课网学习vue的过程中,顺便试试如何在table中实现全选和反选,页面的css样式是直接参考慕课网的样式写的,js是小颖自己写哒,欢迎大家吐槽和点赞,嘻嘻 demo的  git 地址:ShoppingCart 页面效果: 具体怎么实现的呢? 使用localstorage来存储页面信息中已经有写项目是怎么创建的所以小颖在这里就不重复了,其实只是在上篇文章的基础上稍微做了改动: App.vue文件 <temp

  • 使用vue.js实现checkbox的全选和多个的删除功能

    template代码: <template> <div class="hello"> <ul> <li v-for="(item, index) in proData"> <label for=""> <input type="checkbox" :value="index" v-model="selectArr">

  • vue checkbox 全选 数据的绑定及获取和计算方法

    html <input type='checkbox' v-model='checkboxModel' :value='z.coach_id+"-"+z.amount' :i="dianji" @click="lll"> 第一个CheckBox <span><input type='checkbox' v-model='checked' v-on:click='checkedAll'><span clas

  • 利用Vue.js实现checkbox的全选反选效果

    前言 这篇文章主要是跟大家分享了利用Vue.js实现checkbox的全选反选效果,之前写的代码存在一个bug,就是当你选择全选的时候去掉后面的一个选项,再点全选结果就是反的了.后来很感谢朋友留言帮我改了这个问题嘻嘻,下面一起来看看具体是怎么实现的吧. html示例代码 <template> <div> <input type='checkbox' class='input-checkbox' v-model='checked' v-on:click='checkedAll'

  • Vue自定义指令实现checkbox全选功能的方法

    最近做的一个项目需要用到Vue实现全选功能,参考了一下网上的做法,发现用属性计算的复用性不高,于是选用自定义指令,但网上的做法大多是会对原始数据有一定的格式要求,而且没有返回结果,于是做了改进. 上代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div id

  • vue实现全选、反选功能

    用vue写业务代码时候,后端大神丢给我一堆数据,要求是做全选,反选功能,然后把用户更改的数据全部返回给他 基本思路 如果父级选中了,那么父级下面的子集全部选中checked=true; 如果子集中选中了一个,那么父级应该被勾选中 如果子集一个都没有选中,那么父级此时应该没有选中 最后提交用户改变后的数组 (大神原谅我的啰嗦哈) 开始上代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset

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

    演示地址,打开.搜索.随便点 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功能概览 默认没有全选,搜索时支持全选与取消全选, 将选择的数据添加到已选中,已选删除时改变当前搜索列表的状态与全选按钮的状态 全选时

  • JS实现表单全选以及取消全选实例

    本文实例为大家分享了JS实现表单全选以及取消全选的具体代码,供大家参考,具体内容如下 实现效果: 全选按钮:点击全选按钮所有的小按钮都会被选中:点掉全选按钮,所有按钮取消选中: 小按钮:只有全部被选中,全选按钮才会被选中 思路分析: 1.全选和取消全选做法:让下面所有复选框的 checked属性(选中状态)跟随全选按钮即可 使用 this.checked 可以获得当前复选框的状态,如果是true就代表被选中,如果是false就代表没被选中. 注:<input>的 checked 属性是一个布尔

  • 基于JavaScript实现复选框的全选和取消全选

    本文实例为大家分享了js复选框的全选和取消全选的具体代码,供大家参考,具体内容如下 效果图: 测试代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> li{list-style: none;} </style> </head>

  • Javascript实现CheckBox的全选与取消全选的代码

    本文介绍的方法,触发条件独立,可以全选或取消全选指定 name 的 CheckBox , 同一页面可以有多组供全选的 CheckBox ,功能健全,通用性较强. 效果图:运行查看效果: function checkAll(name) { var el = document.getElementsByTagName('input'); var len = el.length; for(var i=0; i 字母全选开关 a b c d e f g 数字全选开关 1 2 3 [Ctrl+A 全选 注

  • js实现复选框的全选和取消全选效果

    在很多网站都有这样的功能,当点击一个全选按钮之后,所有的复选框都会被选中,再点击之后会取消全选,功能非常的人性化,可以省却很多人力,下面就简单介绍一下JS如何实现此功能,代码实例如下: 以下是代码: <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://hovertree.com/" /> <titl

  • iOS实现视频播放全屏和取消全屏功能

    本文实例为大家分享了iOS实现视频播放和取消全屏功能具体代码,供大家参考,具体内容如下 iOS 视频播放全屏和取消全屏功能实现,所需全屏的视频所在的vc需要导航控制器控制 自定义 全屏vc VedioPlayerViewController 并定义属性 /// 自定义的那个视频类 ///@property (nonatomic,strong) VedioPlayer *vedioPlayer; 在VedioPlayer中定义属性 ///视频展示的view 的父视图 @property (nona

  • JavaScript实现复选框全选和取消全选

    JS网页–全选和取消全选,供大家参考,具体内容如下 表格,初始状态下复选框都是未选中状态,选中表头的复选框后,下面几个复选框变为选中状态,取消表头复选框选中状态后,下面几个复选框选中状态也随之取消:下面的几个复选框同时选中时,表头的复选框也随之选中. <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="

  • C#窗体程序实现全屏及取消全屏步骤

    由于项目需要,需要用vs窗体程序实现播放视频的窗口的全屏和取消全屏. 具体实现界面如图: 这是初始状态,视频框的右上角就是控制全屏的按钮 这是全屏后的状态,此时全屏按钮变成了取消全屏的样式 注:为了界面的美观我的全屏并没有把左边的那些控件也盖住,但是是可以设置的,下边代码部分我会进行讲解. 1.首先说明一下我所用的控件及我的项目中控件的名称,以便大家理解. 显示视频的黑框是一个picturebox即代码中的VideoPlayWnd,全屏/取消全屏是一个button即代码中的button4 2.具

  • jquery操作checkbox实现全选和取消全选

    今天这样写了一个全选和取消全选的功能: 全选:$(":checkbox").attr("checked","checked"); 取消全选:$(":checkbox").removeAttr("checked"); 获取选中的:$(":checked[checked='checked']") 发现点全选可以,在点取消全选也可以,获取选中的失效,接下来再点任何按钮都没有效果了 这样行不通,

  • 微信小程序实现多选框全选与取消全选功能示例

    本文实例讲述了微信小程序实现多选框全选与取消全选功能.分享给大家供大家参考,具体如下: js部分: page({ data: { select_all:false, listData: [{code: "111",text: "text1",typ: "type1",}, {code: "021",text: "text2",typ: "type2",}, {code: "11

随机推荐