参考地址
https://blog.csdn.net/sunshine0508/article/details/88390155
看大佬的地址
<div id="app">
<el-table :data="URLModles" :show-header="false" highlight-current-row style=" 100%"
@selection-change="handleSelectionChange">
<el-table-column type="selection" width="55px">
</el-table-column>
<el-table-column type="index" width="55px">
</el-table-column>
<el-table-column prop="expressCode" label="快递代码" width="100px">
</el-table-column>
<el-table-column prop="expressName" label="快递名称" width="100px">
</el-table-column>
<el-table-column label="操作">
<template slot-scope="scope">
<el-button size="mini" :disabled="scope.$index===0" @click="moveUp(scope.$index,scope.row)"><i
class="el-icon-arrow-up"></i></el-button>
<el-button size="mini" :disabled="scope.$index===(URLModles.length-1)"
@click="moveDown(scope.$index,scope.row)"><i class="el-icon-arrow-down"></i></el-button>
<el-button type="info" size="mini" round v-if="scope.$index===0">默认</el-button>
</template>
</el-table-column>
</el-table>
</div>
var vm = new Vue({
el: "#app",
data() {
return {
URLModles: [{
index: '1',
expressCode: 'SF',
expressName: '顺丰快递',
status: true,
}, {
index: '2',
expressCode: 'YTO',
expressName: '圆通快递',
status: true,
}, {
index: '3',
expressCode: 'UC',
expressName: '优速快递',
status: true,
}],
multipleSelection: []
}
},
methods: {
//选择复选框数据
handleSelectionChange(val) {
this.multipleSelection = val;
},
//上移
moveUp(index, row) {
var that = this;
console.log('上移', index, row);
console.log(that.URLModles[index]);
if (index > 0) {
let upDate = that.URLModles[index - 1];
that.URLModles.splice(index - 1, 1);
that.URLModles.splice(index, 0, upDate);
} else {
alert('已经是第一条,不可上移');
}
},
//下移
moveDown(index, row) {
var that = this;
console.log('下移', index, row);
if ((index + 1) === that.URLModles.length) {
alert('已经是最后一条,不可下移');
} else {
console.log(index);
// 保存下一条数据
let downDate = that.URLModles[index + 1];
// 删除下一条数据
that.URLModles.splice(index + 1, 1);
// 增添被删除的那一条数据
that.URLModles.splice(index, 0, downDate);
}
}
}
})
</script>