vue 实现搜索的结果页面支持全选与取消全选

荆兆峰发布于2019-08-26 18:26 / 865人阅读

摘要：搜索结果支持全选与取消选择，且添加到已选中支持删除与清空演示地址，打开搜索随便点仓库代码安装安装在引入功能概览默认没有全选，搜索时支持全选与取消全选，将选择的数据添加到已选中，已选删除时改变当前搜索列表的状态与全选按钮的状态全选

搜索结果支持全选与取消选择，且添加到已选中(支持删除与清空)

演示地址，打开、搜索、随便点

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全选与反选全选的方法

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/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