上下移動順序
阿新 • • 發佈:2020-09-12
上移:moveUp
下移:moveDown
<el-table ref="multipleTable" :height="operaHeight" :data="listTableData" style="width: 100%" @selection-change="handleSelectionChange"> <el-table-column type="selection" width="55"></el-table-column> <el-table-column prop="name" label="操作名稱" min-width="30%"> <template slot-scope="scope"> <span @click="btnActionDataClick(scope.row)">{{ scope.row.name }}</span> </template> </el-table-column> <el-table-column prop="name" label="操作型別" min-width="30%"></el-table-column> <el-table-column prop="address" 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> </template> </el-table-column> <el-table-column prop="address" label="向下移動"> <template slot-scope="scope"> <el-button size="mini" :disabled="scope.$index === listTableData.length - 1" @click="moveDown(scope.$index, scope.row)"> <i class="el-icon-arrow-down"></i> </el-button> </template> </el-table-column> </el-table> data(){ return{ listTableData:[] } }, methods:{ /** * 操作向上移動 */ moveUpmoveUp(index) { console.log(this.listTableData); // 儲存上一條資料 let updata = this.listTableData[index - 1]; // 刪除上一條的資料 this.listTableData.splice(index - 1, 1); // 將上一條資料插入當前的索引陣列 this.listTableData.splice(index, 0, updata); }, /** * 操作向下移動 */ moveDown(index) { // 儲存下一條資料 let downData = this.listTableData[index + 1]; // 刪除下一條資料 this.listTableData.splice(index + 1, 1); // 將下一條資料插入當前的索引中 this.listTableData.splice(index, 0, downData); }, }