![](https://i-blog.csdnimg.cn/blog_migrate/d794ed9f5c09beba7f9cb1f27ab47830.png)
此功能是对列表进行排序,刷新表格
saveSort() {
let _this = this;
let $arr= _this.tableData.map(x => {
return x.id
})
// 排序接口
_this.$ajax.post(_this.$api.resource.map.util.sort, $arr).then(()=>{
this.getData()
})
},
全部代码如下
<template>
<el-table :data="tableData" style="width: 100%">
<el-table-column prop="date" label="日期" width="180">
</el-table-column>
<el-table-column prop="name" label="姓名" width="180">
</el-table-column>
<el-table-column prop="address" label="地址">
</el-table-column>
<el-table-column label="排序">
<template slot-scope="scope">
<el-button @click="handleUp(scope.row)" type="text" icon="el-icon-top" v-if="scope.$index !== 0"
size="small"></el-button>
<el-button @click="handleDown(scope.row)" type="text" icon="el-icon-bottom"
v-if="scope.$index !== tableData.length - 1" size="small"></el-button>
<el-button @click="handleTop(scope.row)" type="text" v-if="scope.$index !== 0" size="small">置顶
</el-button>
</template>
</el-table-column>
</el-table>
</template>
<script>
export default {
data() {
return {
tableData: [{
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}, {
date: '2016-05-04',
name: '王小虎',
address: '上海市普陀区金沙江路 1517 弄'
}, {
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀区金沙江路 1519 弄'
}, {
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀区金沙江路 1516 弄'
}]
}
},
methods:{
//工具(排序方法)
changElementIndex(arr, obj1, tag, k) {
if (!(arr instanceof Array)) {
throw 'arr must be array';
}
let tmp = [];
if (tag === 'up') {
for (let i = 0; i < arr.length; i++) {
if (arr[i][k] === obj1[k]) {
let current = tmp[i - 1];
tmp[i - 1] = arr[i];
tmp[i] = current;
} else {
tmp.push(arr[i]);
}
}
} else if (tag === 'bottom') {
let isCurrent = false;
for (let i = 0; i < arr.length; i++) {
if (arr[i][k] === obj1[k]) {
let current = arr[i + 1];
tmp.push(current);
isCurrent = true;
} else {
if (isCurrent) {
tmp.push(arr[i - 1]);
isCurrent = false;
} else {
tmp.push(arr[i]);
}
}
}
} else if (tag === 'top') {
let topCurrent = null;
for (let i = 0; i < arr.length; i++) {
if (arr[i][k] === obj1[k]) {
topCurrent = arr[i];
} else {
tmp.push(arr[i]);
}
}
tmp.unshift(topCurrent);
}
return tmp;
},
//排序
handleUp(row){
let _this = this;
_this.tableData = this.changElementIndex(_this.tableData, row, 'up', 'id');
_this.saveSort();
},
handleDown(row) {
let _this = this;
_this.tableData = this.changElementIndex(_this.tableData, row, 'bottom', 'id');
_this.saveSort();
},
handleTop(row) {
let _this = this;
_this.tableData =this.changElementIndex(_this.tableData, row, 'top', 'id');
_this.saveSort();
},
saveSort() {
let _this = this;
let $arr= _this.tableData.map(x => {
return x.id
})
// 排序接口
_this.$ajax.post(_this.$api.resource.map.util.sort, $arr).then(()=>{
this.getData()
})
},
}
}
</script>