vue+es6+element對圖片進行選中與取消時重新排序

 需求:當我點擊選中會出來序號,如果取消的話序號會重新計算,

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;right: 0;top: 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,item})"></el-button>
								</el-button-group>
							</div>
							
						</div>
						
						
						</el-card>
					</el-col>
				  </el-row>

 js:

// 點擊選中圖片
			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) {
					// 重新計算imageList選中序號
					for (let 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
			},