vue 實現搜索的結果頁面支持全選與取消全選

荊兆峰發布于2019-08-26 18:26 / 866人閱讀

摘要：搜索結果支持全選與取消選擇，且添加到已選中支持刪除與清空演示地址，打開搜索隨便點倉庫代碼安裝安裝在引入功能概覽默認沒有全選，搜索時支持全選與取消全選，將選擇的數據添加到已選中，已選刪除時改變當前搜索列表的狀態與全選按鈕的狀態全選

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

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

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

GPU云服務器云服務器全選與單選 html全選與單選 js全選與反選全選的方法

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/110193.html

用vue實現一個淘寶購物車，給和我一樣苦苦掙扎的前端小白（更新）

摘要：最近后端的同事要我寫一個購物車，一開始我用寫，但寫著寫著發現邏輯太混亂了，寫不下去。所以我想著用來實現一個。但在購物車中這樣的方法是不行的，單個商品的選中以及取消所執行的邏輯有部分不同，所以我選擇將其拆分。最近后端的同事要我寫一個購物車，一開始我用jQuery寫，但寫著寫著發現邏輯太混亂了，寫不下去。最后花了五分鐘找了個demo丟給了他。后來我不甘心，畢竟水平菜還不求上進就完蛋了。所...

Ajian 2019-08-21 17:39 評論0 收藏0
vue實現單選多選反選全選全不選

摘要：多選如果已經選中了，那就取消選中，如果沒有，則選中接下來我們寫一下全選，全取消，反選的實現。單選當我們用v-for渲染一組數據的時候，我們可以帶上index以便區分他們我們這里利用這個index來簡單地實現單選 {{item}} 首選定義一個selectedNum,當我們點擊item時，便把這個selectedNum更改為我們所點擊的item的index，然后每個item上加入判...

劉福 2019-08-23 11:50 評論0 收藏0
原生Js-msi系統

摘要：我也意識到在學習一個框架前，將框架的思想和原生的實現進行對比有多么重要。這個是目前為止一個大的框架思路，當然還要再進行每個功能的細分。表格將上一步的并集數據顯示出來渲染分表格，表格有一個表頭，用于展示商品的種類地區以及每月的銷售情況。前言：由于剛入前端時間并不長，之前最近一直處在學習的階段，現在準備找工作，回首看看之前學的，發現了很多的瑕疵。我分析覺得主要原因在于之前有些東西學的太快...

K_B_Z 2019-08-23 10:54 評論0 收藏0
微信小程序之購物車功能

摘要：微信小程序其實跟的用法非常像，接下來就看看小程序可以怎樣實現購物車功能。完整的小程序商城含購物車，請戳更多文章微信贊賞前言以往的購物車，基本都是通過大量的 DOM 操作來實現。微信小程序其實跟 vue.js 的用法非常像，接下來就看看小程序可以怎樣實現購物車功能。需求 showImg(https://segmentfault.com/img/remote/146000000935...

Benedict Evans 2019-08-21 11:40 評論0 收藏0
Vue.js實現一個簡易問卷平臺(項目中遇到的問題總結)

摘要：項目地址源碼地址預覽地址沒有做響應式，請在電腦上打開使用了我自制的日歷組件初學時做的，有些糙任務描述參考設計圖實現一個簡易版的問卷管理系統，有如下功能問卷管理列表有一個頭部可以顯示，不需要實現登錄等操作問卷管理列表頁面默認為首頁有一個表格項目地址源碼地址預覽地址（沒有做響應式，請在電腦上打開）使用了我自制的日歷組件（初學vue時做的，有些糙）calendar-input 任...

Scott 2019-08-29 12:22 評論0 收藏0