vue+element ui 实现右侧穿梭框上下排序

时间:2025-01-19 16:27:36
  • <template>
  • <div>
  • <el-row>
  • <el-col :span="20">
  • <el-transfer v-model="outputListTemp" :data="inputList" :props="alias" target-order="push" @right-check-change="rightCheck"></el-transfer>
  • </el-col>
  • <el-col :span="4" style="margin-top: 95px;">
  • <div style="margin-bottom: 10px;">
  • <el-button icon="el-icon-arrow-up" circle :disabled="upDownDisable" @click="upData"></el-button>
  • </div>
  • <div>
  • <el-button icon="el-icon-arrow-down" circle :disabled="upDownDisable" @click="downData"></el-button>
  • </div>
  • </el-col>
  • </el-row>
  • </div>
  • </template>
  • <script>
  • import {
  • Message,
  • Notification
  • } from 'element-ui';
  • export default {
  • name: 'myTransfer',
  • props: [
  • 'value',
  • 'inputList',
  • 'alias'
  • ],
  • data() {
  • return {
  • upDownDisable:true,
  • tempSelectionKeys:[],
  • outputListTemp:[]
  • }
  • },
  • watch: {
  • value(val) {
  • = val;
  • },
  • outputListTemp(val){
  • this.$emit('input', val);
  • }
  • },
  • mounted() {
  • },
  • methods: {
  • rightCheck(selectionKeys, changeKeys){
  • = selectionKeys;
  • if( > 0){
  • = false;
  • }else{
  • = true;
  • }
  • },
  • upData(){
  • if( > 1){
  • this.$message({
  • type: 'warning',
  • message: '仅支持单选调顺序'
  • });
  • return ;
  • }
  • let indexNum = 0;
  • for(let i=0; i<; i++){
  • indexNum = ([i])
  • if(indexNum > 0){
  • (indexNum - 1, 0, [i]);
  • (indexNum + 1, 1);
  • }
  • }
  • },
  • downData(){
  • if( > 1){
  • this.$message({
  • type: 'warning',
  • message: '仅支持单选调顺序'
  • });
  • return ;
  • }
  • let indexNum = 0;
  • for(let i=0; i<; i++){
  • indexNum = ([i]);
  • if(indexNum > -1 && indexNum != - 1){
  • (indexNum + 2, 0, [i]);
  • (indexNum, 1);
  • }
  • }
  • }
  • }
  • }
  • </script>
  • <style type="text/css">
  • </style>