el-tabel表格进行排序

此功能是对列表进行排序，刷新表格

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>