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