Vue implements table up and down movement function example

This article describes the implementation of table up and down movement function in Vue. Share it for your reference, as follows:

Combined with the Element component, there are three parameters (row, cow, $index) in scope representing the row content, column content, and the index value of this row.

Bind array on table:data="tableList"

<el-table :data="tableList">
</el-table>

Add a column, put two buttons on the move up and down, and bind the upper function to index the value of this line (scope.$index) As a parameter, adjust the style itself according to your needs:

<el-button icon="el-icon-arrow-up" :disabled="scope.$index === 0" @click="upFieldOrder(scope.$index)"></el-button>
<el-button icon="el-icon-arrow-down" :disabled="scope.$index ===  - 1" @click="downFieldOrder(scope.$index)"></el-button>

It is wrong to use the following method directly. Although the value of tableList has changed, the update of the view will not be triggered:

upFieldOrder (index) {
  let temp = [index-1];
  [index-1] = [index]
  [index] = temp
 },

Correct upward function:

upFieldOrder (index) {
  let temp = [index-1];
  (, index-1, [index])
  (, index, temp)
 },

Similarly, the downward function is as follows:

downFieldOrder (index) {
  let i = [index+1];
  (, index+1, [index])
  (, index, i)
 }

In this way, the front-end adjustment table sequence function is done. I do not interact with the background every time I click, and submit it together when the page is destroyed:

destroyed() {
 let param = {
  infos: []
 }
 ((dataItem,index) =&gt; {
  ({
  parameter1: dataItem.value1,
  parameter1: dataItem.value2,
  parameter顺序: index
  })
 });
 // Call the background and pass it into param changeTableOrder(param).then(res =&gt; {
  if(=== true) {
 alert('Sequence adjustment was successful')
  }
 })
 }

I hope this article will be helpful to everyone's programming.