在進行列表處理的時候，我們往往會使用選中刪除等功能，此時變涉及選中與取消選中邏輯，另外對於排序也是複雜的邏輯處理，下面簡單介紹其邏輯處理過程，需求如圖：
需求說明：
（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>
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就是不再選中列表中的元素，便是我們需要的刪除之後的數組集合了，進行重新賦值即可，記得對選中的集合進行置空處理。
完整代碼
<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>