Location-based data exchange array slice () method

Summary

　　When using antd react with the table assembly, in order to achieve vertical movement of the table data, specifically to MDN official website of the slice array study () method of use.

basic introduction

　　slice () method returns a new array object, the object is a shallow copy of the original array is determined by the begin and end (including begin, not including the end). Original array will not be changed.

Online editing demo

　　Click to get the current row index array index, use ... Extended operator with the slice () method to reassemble the original array into a new array of applications and extensions operator slice () method can be used in conjunction with in-line editing vessel to try.

Move demo

const animals = ['ant', 'bison', 'camel', 'duck', 'elephant'];
const index = 3;
const newAnimals = [...animals.slice(0, index-1), animals[index], animals[index-1], ...animals.slice(index + 1)]
console.log(animals);
console.log(newAnimals);

　　

Down demo

const animals = ['ant', 'bison', 'camel', 'duck', 'elephant'];
const index =3;
const newAnimals = [...animals.slice(0, index), animals[index+1], animals[index], ...animals.slice(index+2)]
console.log(animals);
console.log(newAnimals);

　　

 

 

 At last

　　With antd in the table react in onRow can obtain the current row click event record data and index index, use slice () method to achieve a viable and down movement of the operation, that is a good thing this time I want to share and, if flawed, welcome to pointing.