演示地址，打開、搜索、隨便點

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

npm i element-ui -S


// main.jsimport 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; } }); },