VUE+element ui + table 实现上下移动
后台管理系统加了个上下移动的功能,思路是通过vue插槽scope获取当前行的key值,通过key+1和key-1实现上下移动
先上一段代码,在data绑定一个ShipData,
<el-table border :data="ShipData" style="width: 100%"> <el-table-column prop="remove" label="移动"> <template scope='scope'> <p v-if='scope.$index==0'> <span style="color: green;cursor: pointer;" @click="down(scope.$index,scope.row)">↓</span> </p> <p v-else> <span style="color:red;cursor: pointer;" @click='up(scope.$index,scope.low)'>↑</span> <span style="color: green;margin-left: 25px;cursor: pointer;" @click="down(scope.$index,scope.row)">↓</span> </p> </template> </el-table-column> </el-table>
代码不是很清晰,插一段图片
通过点击事件把当前行的index拿到
// 上移动
up(index,row){
let list = this.ShipData[index-1]
// console.log(temp);
Vue.set(this.ShipData,index-1,this.ShipData[index])
Vue.set(this.ShipData,index,list)
},
// 下移动
down(index,row){
if(index === (this.ShipData.length - 1)){
$.alert('这已经是最后一条了')
}else{
let item = this.ShipData[index+1]
Vue.set(this.ShipData,index+1,this.ShipData[index])
Vue.set(this.ShipData,index,item)
}
},