vue上下移动排序

最近做的项目上有一个排序功能

图片.png

以前就很少用js的sort，正好可以补补了

先说说sort方法
直接用 arr.sort()是按照ASCII码排序 大家可以看看文档
他还可以加参数 来自定义排序

<script type="text/javascript">

function sortNumber(a,b)
{
return a - b
}

var arr = new Array(6)
arr[0] = "10"
arr[1] = "5"
arr[2] = "40"
arr[3] = "25"
arr[4] = "1000"
arr[5] = "1"

document.write(arr + "<br />")
document.write(arr.sort(sortNumber))

</script>

通过方法的返回值来判断两个数的位置关系
结果

10,5,40,25,1000,1
1,5,10,25,40,1000

所以这个排序的步骤大致是这样
1.获得点击对象，交换位置的对象
2.得到对象的seq，然后交换
3.调用自定义sort方法排序，重新赋值给this.tableData

这里只演示上移方法

<i class="iconfont icon-arrow-top" @click="upward(scope.row.seq)"></i>

data(){
tableData: [{name:'测试1',seq:1},{name:'测试1',seq:2},{name:'测试1',seq:3}]
}
methods: {
      let currentObj = this.tableData[seq - 1]
      let currentSeq = currentObj.seq
      let changeObj = this.tableData[seq - 2]
      let changeSeq = changeObj.seq
      currentObj.seq = changeSeq  //交换赋值
      changeObj.seq = currentSeq  //交换赋值
      this.tableData.sort(count.sort('seq')) //重新渲染
}

这个count.sort是一个自定义方法。在我的count.js中
prop是需要排序的属性
PS：后台给的数据可能是字符串，比较时会出问题。需要转一下
这段代码来自
https://www.cnblogs.com/xljzlw/p/3694861.html#undefined

let count = {
  sort: function (prop) {
    return function (obj1, obj2) {
      var val1 = obj1[prop]
      var val2 = obj2[prop]
      if (!isNaN(Number(val1)) && !isNaN(Number(val2))) {
        val1 = Number(val1)
        val2 = Number(val2)
      }
      if (val1 < val2) {
        return -1
      } else if (val1 > val2) {
        return 1
      } else {
        return 0
      }
    }
  }
}
export default count