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

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

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

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

 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

你可能感兴趣的:(Vue.js,Element)