参考地址
https://blog.csdn.net/sunshine0508/article/details/88390155
看大佬的地址
<div id="app"> <el-table :data="URLModles" :show-header="false" highlight-current-row style="width: 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>