vue 渲染数组,拖拽排序,渲染同一个数组拖拽排序不影响其他选中行状态

当我们能够设置单行状态改变的时候,那么肯定可以拿到选中的当前行的id或者下标index。
只要设定一个初始化值在拖拽开始的时候重新赋值,然后再处理选中状态的时候进行判断即可。
前期写的时候没有注意到这个问题,可以看这个文章。

在复测的时候发现了,当我改变任意一个排序的时候会影响到其他的状态。虽然其他行的顺序没有变化,但是设定的颜色却渲染了。
解决 ,在data 中初始设定一个新的变量 承接 选中的行的父元素下标 startIndex: ‘’, 在开始拖拽的时候获取并重新赋值, this.startIndex = i,在 isSelected 处理改变颜色的时候判断即可。
vue 渲染数组,拖拽排序,渲染同一个数组拖拽排序不影响其他选中行状态_第1张图片

以前的问题

vue 渲染数组,拖拽排序,渲染同一个数组拖拽排序不影响其他选中行状态_第2张图片
解决后不在影响
vue 渲染数组,拖拽排序,渲染同一个数组拖拽排序不影响其他选中行状态_第3张图片
主要的代码也就在这里,天机了传值和接收赋值处理

isSelected(i, j) {
console.log(this.startIndex, ‘///this.startIndex’, i);
if(this.startIndex === i){
return j === this.selectedIndex; // 判断该图标是否被选中
}
},
dragStart (i, j, item2) {
console.log(i, j, item2, ‘----------------’);
this.startIndex = i // 开始选中的行下标。
this.dragStartIndex = j
this.dragStartData = item2
this.selectedIndex = j; // 更新选中的索引值
},
vue 渲染数组,拖拽排序,渲染同一个数组拖拽排序不影响其他选中行状态_第4张图片




  

你可能感兴趣的:(vue.js,javascript,前端,拖拽)