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

你的名字 2021-08-02 20:36 504阅读 0赞

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMTE1OTY1_size_16_color_FFFFFF_t_70][]

需求说明：

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

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

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

--------------------

html

<el-row :gutter="10">
                  <el-col :span="24" :lg="4" :md="6" :sm="8" v-for="(item,index) in imageList" :key="index">
                    <el-card class="box-card mb-3 position-relative" style="cursor: pointer;" :body-style="{'padding':'0'}"
                      shadow="hover">
                      <div class="border" :class="{'border-danger':item.ischeck}">
                        <span class="badge badge-danger" style="position:absolute;top:0;right:0;"
                          v-if="item.ischeck">{
       {item.checkOrder}}</span>
                        <img :src="item.url" class="w-100" style="height: 100px;" @click="choose(item)" />
                        <div class="w-100 text-white px-1"
                          style="background: rgba(0,0,0,0.5);margin-top: -25px;position: absolute;">
                          <span class="small">{
       {item.name}}</span>
                        </div>
                        <div class="p-2 text-center">
                          <el-button-group>
                            <el-button icon="el-icon-view" size="mini" class="p-2" @click="previewImage(item)"></el-button>
                            <el-button icon="el-icon-edit" size="mini" class="p-2" @click="imageEdit(item,index)">
                            </el-button>
                            <el-button icon="el-icon-delete" size="mini" class="p-2" @click="imageDel(index)"></el-button>
                          </el-button-group>
                        </div>
                      </div>
                    </el-card>
                  </el-col>
                </el-row>

--------------------

(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就是不再选中列表中的元素，便是我们需要的删除之后的数组集合了，进行重新赋值即可，记得对选中的集合进行置空处理。

--------------------

完整代码

<template>
      <div>
    
        <el-container style="position: absolute;top: 55px;bottom: 0;left: 0;right: 0;">
          <el-header class="d-flex align-items-center border-bottom">
            
            <div class="d-flex mr-auto">
              <el-select class="mr-2" placeholder="请选择图片排序方式" size="mini" v-model="searchForm.order" style="width: 150px;">
                <el-option label="区域一" value="shanghai"></el-option>
                <el-option label="区域二" value="beijing"></el-option>
              </el-select>
              <el-input class="mr-2" size="mini" placeholder="输入相册名称" v-model="searchForm.keyword" style="width: 150px;">
              </el-input>
              <el-button type="success" size="mini">搜索</el-button>
            </div>
            <el-button type="danger" size="mini" @click="imageDelAll" v-if="chooseList.length>0">批量删除</el-button>
            <el-button type="success" size="mini" @click="openAlbumModel(false)">创建相册</el-button>
            <el-button type="warning" size="mini" @click="uploadModel = true">上传图片</el-button>
          </el-header>
          <el-container>
            <el-aside width="200px" style="position: absolute;top: 60px;left: 0;bottom: 60px;"
              class="bg-white border-right">
              
              <ul class="list-group list-group-flush">
                <album-item v-for="(item,index) in albums" :key="index" :item="item" :index="index"
                  :active="albumIndex === index" @change="albumChange" @edit="openAlbumModel" @del="albumDel"></album-item>
              </ul>
    
            </el-aside>
            <el-container>
              <el-main style="position: absolute;top: 60px;left:200px;bottom: 60px;right: 0;">
                
                <el-row :gutter="10">
                  <el-col :span="24" :lg="4" :md="6" :sm="8" v-for="(item,index) in imageList" :key="index">
                    <el-card class="box-card mb-3 position-relative" style="cursor: pointer;" :body-style="{'padding':'0'}"
                      shadow="hover">
                      <div class="border" :class="{'border-danger':item.ischeck}">
                        <span class="badge badge-danger" style="position:absolute;top:0;right:0;"
                          v-if="item.ischeck">{
       {item.checkOrder}}</span>
                        <img :src="item.url" class="w-100" style="height: 100px;" @click="choose(item)" />
                        <div class="w-100 text-white px-1"
                          style="background: rgba(0,0,0,0.5);margin-top: -25px;position: absolute;">
                          <span class="small">{
       {item.name}}</span>
                        </div>
                        <div class="p-2 text-center">
                          <el-button-group>
                            <el-button icon="el-icon-view" size="mini" class="p-2" @click="previewImage(item)"></el-button>
                            <el-button icon="el-icon-edit" size="mini" class="p-2" @click="imageEdit(item,index)">
                            </el-button>
                            <el-button icon="el-icon-delete" size="mini" class="p-2" @click="imageDel(index)"></el-button>
                          </el-button-group>
                        </div>
                      </div>
                    </el-card>
                  </el-col>
                </el-row>
    
              </el-main>
            </el-container>
          </el-container>
          <el-footer>
            
          </el-footer>
        </el-container>
    
        
        <el-dialog :title="albumModelTitle" :visible.sync="albumModel">
          <el-form ref="form" :model="albumForm" label-width="80px">
            <el-form-item label="相册名称">
              <el-input v-model="albumForm.name" size="medium" placeholder="请输入相册名称"></el-input>
            </el-form-item>
            <el-form-item label="相册排序">
              <el-input-number v-model="albumForm.order" :min="0" size="medium"></el-input-number>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="albumModel = false">取 消</el-button>
            <el-button type="primary" @click="confirmAlbumModel">确 定</el-button>
          </div>
        </el-dialog>
    
        
        <el-dialog title="上传图片" :visible.sync="uploadModel">
          <div class="text-center">
            <el-upload class="upload-demo w-100" drag action="https://jsonplaceholder.typicode.com/posts/" multiple>
              <i class="el-icon-upload"></i>
              <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
              <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>
            </el-upload>
          </div>
        </el-dialog>
    
        
        <el-dialog :visible.sync="previewModel" width="60vw" top="5vh">
          <div style="margin: -60px -20px -30px -20px;">
            <img :src="previewUrl" class="w-100" />
          </div>
        </el-dialog>
    
      </div>
    </template>
    
    <script>
    import albumItem from "@/components/image/album-item.vue";
    export default {
      components: {
        albumItem
      },
      data() {
        return {
          uploadModel: false,
          searchForm: {
            order: "",
            keyword: ""
          },
          albumIndex: 0,
          albumModel: false,
          albumEditIndex: -1,
          albumForm: {
            name: "",
            order: 0
          },
          albums: [],
          previewModel: false,
          previewUrl: "",
          imageList: [],
          chooseList: []
        };
      },
      computed: {
        albumModelTitle() {
          return this.albumEditIndex > -1 ? "修改相册" : "创建相册";
        }
      },
      created() {
        this.__init();
      },
      methods: {
        
        // 选中图片
        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;
        },
        __init() {
          for (var i = 0; i < 20; i++) {
            this.albums.push({
              name: "相册" + i,
              num: Math.floor(Math.random() * 100),
              order: 0
            });
          }
    
          for (var i = 0; i < 20; i++) {
            this.imageList.push({
              id: i,
              url:
                "https://tangzhe123-com.oss-cn-shenzhen.aliyuncs.com/Appstatic/qsbk/demo/datapic/40.jpg",
              name: "图片" + i,
              ischeck: false,
              checkOrder: 0
            });
          }
        },
        // 切换相册
        albumChange(index) {
          this.albumIndex = index;
        },
        // 打开相册修改/创建框
        openAlbumModel(obj) {
          // 修改
          if (obj) {
            let { item, index } = obj;
            // 初始化表单
            this.albumForm.name = item.name;
            this.albumForm.order = item.order;
            this.albumEditIndex = index;
            // 打开模态框
            return (this.albumModel = true);
          }
          // 创建
          this.albumForm = {
            name: "",
            order: 0
          };
          this.albumEditIndex = -1;
          this.albumModel = true;
        },
        // 点击确定修改/创建相册
        confirmAlbumModel() {
          // 判断是否为修改
          if (this.albumEditIndex > -1) {
            this.albumEdit();
            return (this.albumModel = false);
          }
          // 追加albums
          this.albums.unshift({
            name: this.albumForm.name,
            order: this.albumForm.order,
            num: 0
          });
          this.albumModel = false;
        },
        // 修改相册
        albumEdit() {
          this.albums[this.albumEditIndex].name = this.albumForm.name;
          this.albums[this.albumEditIndex].order = this.albumForm.order;
        },
        // 删除相册
        albumDel(index) {
          this.$confirm("是否删除该相册", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning"
          }).then(() => {
            this.albums.splice(index, 1);
            this.$message({
              message: "删除成功",
              type: "success"
            });
          });
        },
    
        // 批量删除
        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"
            });
          });
          
        },
        // 预览图片
        previewImage(item) {
          this.previewUrl = item.url;
          this.previewModel = true;
        },
        // 修改图片名称
        imageEdit(item, index) {
          this.$prompt("请输入新名称", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            inputValue: item.name,
            inputValidator(val) {
              if (val === "") {
                return "图片名称不能为空";
              }
            }
          }).then(({ value }) => {
            item.name = value;
            this.$message({
              message: "修改成功",
              type: "success"
            });
          });
        },
        // 删除当前图片
        imageDel(index) {
          this.$confirm("是否删除该图片?", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning"
          }).then(() => {
            this.imageList.splice(index, 1);
            this.$message({
              message: "删除成功",
              type: "success"
            });
          });
        }
      }
    };
    </script>
    
    <style>
    .sum-active {
      color: #67c23a !important;
      background-color: #f0f9eb !important;
      border-color: #c2e7b0 !important;
    }
    </style>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMTE1OTY1_size_16_color_FFFFFF_t_70]: /images/20210802/09c12f78853d48f9b9f9981972514c60.png