Vue实现table列表项上下移动

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

结合Element组件，scope中有三个参数（row，cow，$index）分别表示行内容、列内容、以及此行索引值，

table上绑定数组 :data=“newsList”。

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

向上↑

向下↓

js需要引入Vue模块，

importVuefrom'vue'

上移下移函数，此处的坑，是vue视图更新！！！

直接使用下面这种方式是错误的，虽然tableList的值变了，但是不会触发视图的更新：

upFieldOrder (index) {

let temp =this.tableList[index-1];

this.tableList[index-1]  =this.tableList[index]

this.tableList[index] = temp

    },

正确方法：

// 上移按钮

    sortUp (index, row) {

if(index ===0) {

this.$message({

message:'已经是列表中第一个素材！',

type:'warning'

        })

}else{

let temp =this.newsList[index -1]

Vue.set(this.newsList, index -1,this.newsList[index])

Vue.set(this.newsList, index, temp)

      }

    },

同理，下移函数，

// 下移按钮

    sortDown (index, row) {

if(index === (this.newsList.length -1)) {

this.$message({

message:'已经是列表中最后一个素材！',

type:'warning'

        })

}else{

let i =this.newsList[index +1]

Vue.set(this.newsList, index +1,this.newsList[index])

Vue.set(this.newsList, index, i)

      }

    }