搜刮效果支撑全选与作废挑选，且添加到已选中(支撑删除与清空)

演示地点，翻开、搜刮、随意点

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功用概览

• 默许没有全选，搜刮时支撑全选与作废全选，
• 将挑选的数据添加到已选中，已选删除时转变当前搜刮列表的状况与全选按钮的状况
• 全选时悉数追加到已选，作废全选时从已选中删除当前搜刮的列表

功用列表

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