java链表实现列表数据上移下移_table中实现数据上移下移效果

html

由于vue+Element项目中的table，没有开放的上移下移的api,但是能对数据操作，故思路为数组中的一条数据，再重新添加一条数据，办法有点笨，但是好歹也是实现了，望有好的办法的，请留言

:data="tableData"

style="width: 100%"

>

prop="date"

label="日期"

width="180">

prop="name"

label="姓名"

width="180">

prop="address"

label="地址"

:formatter="formatter">

size="mini"

@click="handleUp(scope.$index, scope.row)"

>上移

size="mini"

type="danger"

@click="handleDown(scope.$index, scope.row)">下移

size="mini"

type="danger"

@click="deleteDown(scope.$index, scope.row)">删除

js

data () {

return {

'tableData': [{

date: '2016-05-02',

name: '王小虎',

address: '上海市普陀区金沙江路 1 弄',

id:'1'

}, {

date: '2016-05-04',

name: '王小虎',

address: '上海市普陀区金沙江路 2 弄',

id:'2'

}, {

date: '2016-05-01',

name: '王小虎',

address: '上海市普陀区金沙江路 3 弄',

id:'3'

}, {

date: '2016-05-03',

name: '王小虎',

address: '上海市普陀区金沙江路 4 弄',

id:'4'

}],

'obj':{

'x':1,

'y':2

}

}

},

methods:{

formatter(row, column) {

//console.log('地址格式化',row,column);

return row.address;

},

handleUp(index,row) {

console.log('上移',index,row);

console.log(this.tableData[index]);

if (index > 0) {

let upDate = this.tableData[index - 1]

this.tableData.splice(index - 1, 1);

this.tableData.splice(index,0, upDate);

} else {

alert('已经是第一条，不可上移');

}

},

deleteDown(index,row){

console.log('删除',index,row);

this.tableData.splice(index, 1);

},

handleDown(index,row){

console.log('下移',index,row);

if ((index + 1) === this.tableData.length){

alert('已经是最后一条，不可下移');

} else {

console.log(index);

let downDate = this.tableData[index + 1]

this.tableData.splice(index + 1, 1);

this.tableData.splice(index,0, downDate);

}

}

}