vue 實(shí)現(xiàn)搜索的結(jié)果頁面支持全選與取消全選

荊兆峰發(fā)布于2019-08-26 18:26 / 880人閱讀

摘要：搜索結(jié)果支持全選與取消選擇，且添加到已選中支持刪除與清空演示地址，打開搜索隨便點(diǎn)倉庫代碼安裝安裝在引入功能概覽默認(rèn)沒有全選，搜索時支持全選與取消全選，將選擇的數(shù)據(jù)添加到已選中，已選刪除時改變當(dāng)前搜索列表的狀態(tài)與全選按鈕的狀態(tài)全選

搜索結(jié)果支持全選與取消選擇，且添加到已選中(支持刪除與清空)

演示地址，打開、搜索、隨便點(diǎn)

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功能概覽

默認(rèn)沒有全選，搜索時支持全選與取消全選，
將選擇的數(shù)據(jù)添加到已選中，已選刪除時改變當(dāng)前搜索列表的狀態(tài)與全選按鈕的狀態(tài)
全選時全部追加到已選，取消全選時從已選中刪除當(dāng)前搜索的列表

功能列表

1、搜索時展示相應(yīng)的數(shù)據(jù)列表，支持全選與取消全選，（默認(rèn)展示所有數(shù)據(jù)時不支持全選）

    datas() {
      // 每次搜索的數(shù)據(jù) 根據(jù)下拉菜單的值的變化
      if (this.value !== "") {
        return this.listItem.list.filter(item => {
          return item.BrandNames.includes(this.value);
        });
      } else {
        return this.listItem.list; // 沒有搜索的關(guān)鍵詞時展示全部數(shù)據(jù)
      }
    },

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、當(dāng)前界面全選時添加到已選中，當(dāng)前界面取消全選時，從已選的數(shù)據(jù)刪除當(dāng)前搜索出來的列表數(shù)據(jù)，

    // 每次搜索列表的全選 與 取消全選
    ckAll() {
      this.allck = !this.allck;  //點(diǎn)擊全選 變 取消選擇
      let arrys = []; //存放復(fù)選框?yàn)槿∠麪顟B(tài)的數(shù)據(jù)
      if (this.allck) { // 將當(dāng)前搜索的列表數(shù)據(jù)追加到已選中
        this.datas.forEach(item => {
          item.ck = true; 
          if (!this.arr.includes(item)) { // 追加復(fù)選框?yàn)閒alse的數(shù)據(jù)
            this.arr.push(item);
            this.ckarr.push(item);
          }
        });
      } else {
        this.datas.forEach(item => {  item.ck = false; }); //當(dāng)前搜索的數(shù)據(jù)列表復(fù)選框設(shè)為取消狀態(tài)
        arrys = this.datas.filter(item => {  return !item.ck;  });   //把復(fù)選框?yàn)閒alse的數(shù)據(jù) 拿出來
        this.datas.forEach(items => {  //已選那里刪除當(dāng)前搜索列表復(fù)選框?yàn)閒alse的數(shù)據(jù)
          arrys.forEach(item => {
            if (item.BrandID == items.BrandID) { this.arr.splice(this.arr.indexOf(item), 1);}
          });
        });
        this.ckarr = []; //當(dāng)前搜索列表為復(fù)選框的數(shù)據(jù)清空
      }
    },

4、列表選中時添加到已選，全部選中時改變?nèi)x狀態(tài)(變?nèi)∠x)

// 監(jiān)聽當(dāng)前搜索列表的勾選數(shù)據(jù)
    ckarr: function() {
      if (this.value !== "") {
        this.ckarr.length == this.datas.length ? this.allck = true  : this.allck = false; //如果已選等于當(dāng)前搜索列表 改變?nèi)x狀態(tài)
      }
    }

5、在已選中操作刪除時，如果刪除的是當(dāng)前搜索的列表,當(dāng)前全選改變狀態(tài)，如果刪除的非當(dāng)前搜索列表，當(dāng)前全選狀態(tài)不變(這里有點(diǎn)繞)

    handleClose(tag) {
      this.arr.splice(this.arr.indexOf(tag), 1); // 點(diǎn)哪刪哪
      this.ckarr.forEach(items => {   // 判斷刪除的是否是當(dāng)前搜索列表的數(shù)據(jù) 是的話改變?nèi)x狀態(tài)
        if (items.BrandID == tag.BrandID) {
          this.ckarr.splice(this.ckarr.indexOf(tag), 1);
        }
      });
      this.listItem.list.forEach(items => {       // 刪除已選時改變數(shù)據(jù)列表狀態(tài)
        if (items.BrandID == tag.BrandID) { items.ck = false; }
      });
    },