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

搜索结果支持全选与取消选择，且添加到已选中(支持删除与清空)

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

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

仓库代码 : https://github.com/msisliao/v...

• 安装vue-cli
• 安装elementUI npm i element-ui -S
• 在main.js 引入elementUI

// main.js
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI)

demo功能概览

• 默认没有全选，搜索时支持全选与取消全选，
• 将选择的数据添加到已选中，已选删除时改变当前搜索列表的状态与全选按钮的状态
• 全选时所有追加到已选，取消全选时从已选中删除当前搜索的列表

功能列表

一、搜索时展现相应的数据列表，支持全选与取消全选，（默认展现全部数据时不支持全选）

datas() {
      // 每次搜索的数据 根据下拉菜单的值的变化
      if (this.value !== "") {
        return this.listItem.list.filter(item => {
          return item.BrandNames.includes(this.value);
        });
      } else {
        return this.listItem.list; // 没有搜索的关键词时展现所有数据
      }
    },

二、搜索的下拉菜单去重

filDatas() {
      // 利用reduce 下拉菜单去重
      var obj = {};
      return this.listItem.list.reduce(function(item, next) {
        obj[next.BrandNames] ? "" : (obj[next.BrandNames] = true && item.push(next));
        return item;
      }, []);
    }

三、当前界面全选时添加到已选中，当前界面取消全选时，从已选的数据删除当前搜索出来的列表数据，

// 每次搜索列表的全选 与 取消全选
    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 = []; //当前搜索列表为复选框的数据清空
      }
    },

四、列表选中时添加到已选，所有选中时改变全选状态(变取消全选)

// 监听当前搜索列表的勾选数据
    ckarr: function() {
      if (this.value !== "") {
        this.ckarr.length == this.datas.length ? this.allck = true  : this.allck = false; //若是已选等于当前搜索列表 改变全选状态
      }
    }

五、在已选中操做删除时，若是删除的是当前搜索的列表,当前全选改变状态，若是删除的非当前搜索列表，当前全选状态不变(这里有点绕)

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; }
      });
    },