数组列表项上下移动

列表项上下移动

• 一、js操作数组移动
• 二、Vue实现table列表项上下移动

一、js操作数组移动

/**
 * @description: 
 * @param {*} arr 操作的数组
 * @param {*} index1 准备移动的元素
 * @param {*} index2 移动到的位置  往下移就是 index2=index+1 往上移动就是 index2=index-1；
 * @param {*} direction up->置顶, down->置底
 * @return {*} Array
 */
var swapItems = function (arr, index1, index2, direction) {
  if (direction == 'up') { //置顶
    arr.unshift(arr[index1]);
    arr.splice(index1 + 1, 1);
    return arr;
  }
  if (direction == 'down') { //置底
    arr.push(arr[index1]);
    arr.splice(index1, 1);
    return arr;
  }
  arr[index1] = arr.splice(index2, 1, arr[index1])[0];
  return arr;
};
//然后js调用
function upIndex(index) { //置顶
  if (index == 0) {
    return;
  }
  swapItems(myAppList, index, 0, 'up');
},

function up(index) { //上移
  if (index == 0) {
    console.log('已经是列表中第一个！')
    return;
  }
  swapItems(myAppList, index, index - 1);
},

function down(index) { //下移
  if (index == myAppList.length - 1) {
    return;
  }
  swapItems(myAppList, index, index + 1);
},

function downIndex(index) { //置底
  if (index == myAppList.length - 1) {
    console.log('已经是列表中最后一个！')
    return;
  }
  swapItems(myAppList, index, 0, 'down');
}

二、Vue实现table列表项上下移动

<template>
  <el-table :data="newsList">
    <el-table-column type="index"  label="序号" width="50"></el-table-column>
    <el-table-column prop="title" label="文章标题" min-width="300" ></el-table-column>
    <el-table-column prop="descript" label="文章描述" min-width="300" ></el-table-column>
    <el-table-column label="操作(素材排序)"  >
      <template slot-scope="scope">
        <el-button size="mini" type='text'    @click.stop="sortUp(scope.$index, scope.row)">向上↑ </el-button>
        <el-button size="mini" type='text'    @click.stop="sortDown(scope.$index, scope.row)">向下↓</el-button>
      </template>
    </el-table-column>
  </el-table>
</template>

1.上移

// 上移按钮
sortUp (index, row) {
  if (index === 0) {
    this.$message({
      message: '已经是列表中第一个素材！',
      type: 'warning'
    })
  } else {
    let temp = this.newsList[index - 1]
    this.$set(this.newsList, index - 1, this.newsList[index])
    this.$set(this.newsList, index, temp)
  }
},

2.下移

// 下移按钮
sortDown (index, row) {
  if (index === (this.newsList.length - 1)) {
    this.$message({
      message: '已经是列表中最后一个素材！',
      type: 'warning'
    })
  } else {
    let i = this.newsList[index + 1]
    this.$set(this.newsList, index + 1, this.newsList[index])
    this.$set(this.newsList, index, i)
  }
}