搜索結果支持全選與取消全選,打開、搜索、隨便點
- 安裝vue-cli
- 安裝elementUI
npm i element-ui -S
- 在main.js 引入elementUI
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI)
demo http://msisliao.github.io/demo/dist/index.html#/
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; }
});
},