vue-element-列表穿梭框

<div class="center-box"> <div class="c-left"> <span class="c-title">案件列表</span> <div class="list-box"> <div @click="listClick(i,index,'left')" v-for="(i,index) in caseLeftList" :key="index"> <el-row class="list-content" :class="{'list-content-select':checked.direction == 'left'&&checked.index == index}" > <img src="@/assets/img/icon/select.png" class="bg-img" /> <el-col :span="24" class="list-title">{{i.title}}</el-col> <el-col :span="15"> <b>勘察号：</b> <span class="c-span">{{i.number}}</span> </el-col> </el-row> </div> </div> </div> <div class="c-center"> <img src="@/assets/img/icon/right.png" class="c-button" :style="{cursor:checked.direction != 'left'?'not-allowed':'pointer'}" @click="listChange" /> <img src="@/assets/img/icon/left.png" class="c-button" :style="{cursor:checked.direction != 'right'?'not-allowed':'pointer'}" @click="listChange" /> </div> <div class="c-right"> <span class="c-title">已选案件({{caseRightList.length}})</span> <div class="list-box"> <div @click="listClick(i,index,'right')" v-for="(i,index) in caseRightList" :key="index" > <el-row class="list-content" :class="{'list-content-select':checked.direction == 'right'&&checked.index == index}" > <img src="@/assets/img/icon/select.png" class="bg-img" /> <el-col :span="24" class="list-title">{{i.title}}</el-col> <el-col :span="15"> <b>勘察号：</b> <span class="c-span">{{i.number}}</span> </el-col> </el-row> </div> </div> </div> </div> data() { return { //未选案件 caseLeftList: [ { title: "张某/赵某诈骗案", number: "11111", type: "虚假购物消费诈骗", person: "张三，李斯", time: "2019-12-03 09:45:12", name: "张凯", company: "瑞安上望派出所" } ], //已选案件 caseRightList: [], // 选中的数据 checked: { checkList: "", index: "", direction: "" } }; }, //选中数据 listClick(row, index, direction) { // 选中的数据 this.checked = { checkList: row, index: index, direction: direction }; console.log(index); }, //点击箭头切换数据 listChange() { if (this.checked.direction == "left") { this.caseLeftList.splice(this.checked.index, 1); this.caseRightList.push(this.checked.checkList); } else if (this.checked.direction == "right") { this.caseRightList.splice(this.checked.index, 1); this.caseLeftList.push(this.checked.checkList); } } }