Vuejs 实现Element - tableData 列表排序上下移动

el-tabel 列表项实现上移，下移，删除功能

结合Element组件，scope中有三个参数（row，cow，$index）分别表示行内容、列内容、以及此行索引值，
table上绑定数组 :data=“newsList”。

上移和下调两个按钮，并绑定上点击函数，将此行的索引值(scope.$index)作为参数：

<template>
      <el-table :data="tableData">
        <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">
                <i class="upward-icon" @click.stop="sortUp(scope.$index,scope.row)"></i>
                <i class="down-icon" @click.stop="sortDown(scope.$index,scope.row)"></i>
            </template>
        </el-table-column>
      </el-table>
</template>

 js需要引入Vue模块

import Vue from 'vue'

上移

sortUp (index,row) {
    let temp = this.tableData[index - 1];
    Vue.set(this.tableData, index - 1, this.tableData[index]);
    Vue.set(this.tableData, index, temp)
},

下移

sortDown (index,row) {
    let i = this.tableData[index + 1];
    Vue.set(this.tableData, index + 1, this.tableData[index]);
    Vue.set(this.tableData, index, i)
},

来源：https://blog.csdn.net/zhengyinling/article/details/86598510