vue el-table 多选列表上移、下移

let moveSelectList = {
/**
     * moveUp 勾选列表数据上移
     * multipleSelection 勾选的数据(已按在列表list中的下标从小到大排序)
     * list 当前操作的列表
     * */
    moveUp: moveUp(multipleSelection, list) {
        //index当前数据在规则条件列表中的下标 上移从下标最小的开始
        let prevIndex = -1; //上一条没执行上移的数据下标
        for(let i = 0; i<multipleSelection.length; i++) {
            let index = 0;
            for(let j=0; j<list.length; j++) {
                //查找勾选的这条数据在列表里的下标
                if(multipleSelection[i] == list[j]) {
                    index = j;
                    break;
                }
            }
            //当前操作数据的上一条数据没执行上移 则当不需要上移 目的是防止下标是0,1,2,3...按顺序无空隙的数据不执行上移
            if(index - 1 != prevIndex) {
                //splice()将要上移的数据A(下标index)替换掉A的上一条数据B(下标index-1),并获得被替换的这条数据B
                // 将B设置为A原来所在的位置(下标index)
                list[index] =  list.splice(index - 1, 1, list[index])[0];
                //A,B两条数据下标发生变化,更新对象下标值
                list[index].index = index;
                list[index-1].index = index - 1;
            } else {
                //为下条数据排序作用
                prevIndex = index;
            }
        }
        return list;
    },
    /**
     * moveDown 勾选列表数据下移
     * multipleSelection 勾选的数据(已按在列表list中的下标从小到大排序)
     * list 当前操作的列表
     * */
    moveDown: moveDown(multipleSelection, list) {
        //index当前数据在规则条件列表中的下标 下移从下标最大的开始
        let prevIndex = list.length; //上一条没执行下移的数据下标
        for(let i=multipleSelection.length-1; i>=0; i--) {
            let index = list.length - 1;
            for(let j=0; j<list.length; j++) {
                //查找勾选的这条数据在列表里的下标
                if(multipleSelection[i] == list[j]) {
                    index = j;
                    break;
                }
            }
            //当前操作数据的下一条数据没执行下移 则当前操作数据不需要下移 目的是防止下标是length - 1,length - 2,length - 3...按顺序无空隙的数据不执行下移
            if(index + 1 != prevIndex) {
                //splice()将要下移的数据A(下标index)替换掉A的下一条数据B(下标index+1),并获得被替换的这条数据B
                // 将B设置为A原来所在的位置(下标index)
                list[index] =  list.splice(index + 1, 1, list[index])[0];
                //A,B两条数据下标发生变化,更新对象下标值
                list[index].index = index;
                list[index+1].index = index + 1;
            } else {
                //为下条数据排序作用
                prevIndex = index;
            }
        }
        return list;
    }

}

还可以使用vuedraggable(页面中直接使用table)直接拖拽移动

  • 1
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值