|
|
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)
}
}