element-ui后台管理系统学习(8)-选中与取消选中，删除与批量删除

在进行列表处理的时候，我们往往会使用选中删除等功能，此时变涉及选中与取消选中逻辑，另外对于排序也是复杂的逻辑处理，下面简单介绍其逻辑处理过程，需求如图：

需求说明：

（1）删除：点击删除图标后，删除当前图片；

（2）选中与取消选中：在选中图片后，右上方会显示当前选中的顺序，如1、2、3...，在取消其中一个或者多个后，便会重新排序。

（3）在选中图片后，会出现批量删除的按钮，功能就是删除选中图片。

---

html

           
              
                
                  

                    {{item.checkOrder}}
                    
                    

                      {{item.name}}
                    
                    

                      
                        
                        
                        
                        
                      
                    
                  
                
              
            

---

 js

(1)、选中与取消选中逻辑

    // 选中图片
    choose(item) {
      // 选中功能
      if (!item.ischeck) {
        this.chooseList.push({
          id: item.id,
          url: item.url
        });
        item.checkOrder = this.chooseList.length;
        item.ischeck = true;
        return;
      }
      // 取消选中
      // 找到在chooseList中的索引，删除
      let i = this.chooseList.findIndex(v => v.id === item.id);
      if (i === -1) return;
      // 重新计算序号
      let length = this.chooseList.length;
      // 取消选中中间部分
      if (i + 1 < length) {
        for (var j = i; j < length; j++) {
          let no = this.imageList.findIndex(
            v => v.id === this.chooseList[j].id
          );
          if (no > -1) {
            this.imageList[no].checkOrder--;
          }
        }
      }
      this.chooseList.splice(i, 1);
      item.ischeck = false;
      item.checkOrder = 0;
    },

逻辑分析：

点击选中后，执行choose(item)函数，函数功能如下：

在图片为选中时，this.chooseList.push({id: item.id,url: item.url});=>添加选中的图片到选中列表chooseList中；item.checkOrder = this.chooseList.length; => 标记选中的顺序；item.ischeck = true;=>改变选中的状态。

在图片已经选中时，除了从选中列表中删除之外，还要重新进行选中排序。

---

(2)、批量删除

    imageDelAll() {
      this.$confirm("是否删除选中相册", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        let list = this.imageList.filter(img => {
        return !this.chooseList.some(c=>c.id === img.id);
      });
      console.log(list,'1111111')
      this.imageList = list;
      this.chooseList = [];
        this.$message({
          message: "删除成功",
          type: "success"
        });
      });
    },

逻辑分析：

在批量删除的时候，目的就是找到删除后剩下的元素，具体的方法如下：

let list = this.imageList.filter(img => {
        return !this.chooseList.some(c=>c.id === img.id);
      });
console.log(list,'1111111')
this.imageList = list;
this.chooseList = [];

在imageList中，使用filter过滤出id与在chooseList中id相同的元素，使用some方法就是在chooseList中寻找相同id的元素，之后，在进行取反，那么list就是不再选中列表中的元素，便是我们需要的删除之后的数组集合了，进行重新赋值即可，记得对选中的集合进行置空处理。

---

完整代码