更改一列checkbox的顺序

不知道取啥标题了，记录之用，效果如图：

选取任意checkbox，点击向上或向下按钮,就可以改变顺序：

代码如下：

<div class="vm-container"><el-checkbox-group v-model="selectedVMs"><el-checkbox v-for="(vm, index) in vmList" :key="index" :label="vm">{{ vm }}</el-checkbox></el-checkbox-group>
</div><div class="arrow-column"><el-button type="primary" icon="el-icon-arrow-up" @click="moveUp" :disabled="isMoveUpDisabled"></el-button><el-button type="primary" icon="el-icon-arrow-down" @click="moveDown" :disabled="isMoveDownDisabled"></el-button>
</div>

script

javascript">data() {return {vmList: ['VM1', 'VM2', 'VM3', 'VM4', 'VM5','vm6','vm7','vm8','vm9'],selectedVMs: [],}
},
computed: {isMoveUpDisabled() {// 检查是否有选中的虚拟机且最上面的选中项的索引为 0const selectedIndexes = this.selectedVMs.map(vm => this.vmList.indexOf(vm));return selectedIndexes.length === 0 || Math.min(...selectedIndexes) === 0;},isMoveDownDisabled() {// 检查是否有选中的虚拟机且最下面的选中项的索引为 vmList.length - 1const selectedIndexes = this.selectedVMs.map(vm => this.vmList.indexOf(vm));return selectedIndexes.length === 0 || Math.max(...selectedIndexes) === this.vmList.length - 1;}
},
metheds:{moveUp() {// 1. 获取所有选中的虚拟机（VM）的索引位置const selectedIndexes = this.selectedVMs.map(vm => this.vmList.indexOf(vm))// 2. 过滤掉索引小于等于0的项，确保只操作有效的（非第一个）索引const validIndexes = selectedIndexes.filter(index => index > 0)// 3. 按升序排序索引，确保我们从后往前操作（从较大的索引开始移动）validIndexes.sort((a, b) => a - b)// 4. 遍历每一个有效索引，并进行相应的移动操作validIndexes.forEach(index => {if (index > 0) {// 5. 从 vmList 中移除选中的 VM（并保存移除的对象）const vmToMove = this.vmList.splice(index, 1)[0]// 6. 将该 VM 插入到前一个位置，即将其上移this.vmList.splice(index - 1, 0, vmToMove)}})},moveDown() {// 1. 获取所有选中的虚拟机（VM）的索引位置，并过滤掉最后一个索引（即不需要下移的 VM）const selectedIndexes = this.selectedVMs.map(vm =>this.vmList.indexOf(vm)).filter(index => index < this.vmList.length - 1)// 2. 反转索引，确保我们从下往上操作（从较小的索引开始移动）selectedIndexes.sort((a, b) => b - a)// 3. 遍历每一个有效索引，并进行相应的移动操作selectedIndexes.forEach(index => {if (index < this.vmList.length - 1) {// 4. 获取要下移的虚拟机（vm）const vmToMove = this.vmList[index]// 5. 从 vmList 中移除选中的 VMthis.vmList.splice(index, 1)// 6. 将该 VM 插入到后一个位置，即将其下移this.vmList.splice(index + 1, 0, vmToMove)}})
}}

style

.vm-container {float: left;border: 1px solid #dcdfe6; /* 边框样式 */padding: 10px; /* 内边距 */min-width: 100px;max-width: 300px;max-height: 500px; /* 固定高度 */overflow-y: auto; /* 超出内容时出现滚动条 */
}.el-checkbox-group{display: flex;flex-direction: column; /* 子元素垂直排列 */align-items: left; /* 水平居中对齐 */.el-checkbox{margin-right: 0px;}
}.vm-container::v-deep .el-checkbox .el-checkbox__inner{width: 15px;height: 15px;
}.vm-container::v-deep .el-checkbox .el-checkbox__input.is-checked .el-checkbox__inner::after{top: 2px;left:5px
}.arrow-column {margin-left: 10px;float: left;display: flex;flex-direction: column;align-items: left;justify-content: center;
}
.el-button+.el-button{margin-left:0px;margin-top:5px
}

🆗🦌