Table 表格實現上移下移功能

js實現table表格上下移動功能，需要交換行與行的數據內容，即a,b=b,a（一行代碼）

<template slot="operation" slot-scope="text, record, index">
    <a @click="delRow(index,record)">
        <a-icon type="delete" theme="twoTone" title="刪除"/>
    </a>
    <span style="margin: 0px 15px">|</span><a @click="aMoveUp(index)"
                                              :disabled="index === 0">上移</a>
    <span style="margin: 0px 15px">|</span><a @click="aMoveDown(index)"
                                              :disabled="index === dataSource.length-1">下移</a>
</template>

js實現數據互換方式（很多，本文推薦三種）

1.聲明一個數組，存放上下兩行的數據，特別注意，直接用等號賦值會導致視圖不及時渲染，值發生了交換，但視圖沒響應

const data = [this.dataSource[index], this.dataSource[index + 1]]
// this.dataSource[index] = data[1]
// this.dataSource[index + 1] = data[0]
this.$set(this.dataSource, index, data[1])
this.$set(this.dataSource, index + 1, data[0])

// 上移
aMoveUp (index) {
  const data = [this.dataSource[index], this.dataSource[index - 1]]
  this.$set(this.dataSource, index, data[1])
  this.$set(this.dataSource, index - 1, data[0])
},

// 下移
aMoveDown (index) {
  const data = [this.dataSource[index], this.dataSource[index + 1]]
  this.$set(this.dataSource, index, data[1])
  this.$set(this.dataSource, index + 1, data[0])
}

2.ES6的解構賦值，[a,b] = [b,a]。試圖不渲染需要使用this.$set()

[this.dataSource[index], this.dataSource[index + 1]] = [this.dataSource[index+1], this.dataSource[index]]

3.運用運算符優先級。a=[b,b=a][0]

this.dataSource[index] = [this.dataSource[index+1], [this.dataSource[index+1] = [this.dataSource[index]][0]

// 上移
aMoveUp (index) {
  this.$set(this.dataSource, index, [this.dataSource[index - 1], this.dataSource[index - 1] = this.dataSource[index]][0])
}

// 下移
aMoveDown (index) {
  this.$set(this.dataSource, index, [this.dataSource[index + 1], this.dataSource[index + 1] = this.dataSource[index]][0])
}