表格多行选中上下移动

需求:增加表格行对选,然后点击 上、下移动按钮可实现整体上下移动,并且保持行选中样式。
//上移
    upMoveHandler(tTable){
      let arrs_sel = this.seqSelectTr(this.selAddTrArrs, 'seq');
      const arrs_ = JSON.parse(JSON.stringify(arrs_sel));
      for(let elem of arrs_){
        const _index = this.newAddTableArrs.findIndex((nelem) => {
          return nelem.id == elem.id
        });
        _index > 0 && this.goingUp(this.newAddTableArrs[_index], _index);
      }

      setTimeout(() => {
        for(let _elem of arrs_){
          const _index_ = this.newAddTableArrs.findIndex((nelem) => {
            return nelem.id == _elem.id
          });
          _index_ !== -1 && this.$refs[tTable].toggleRowSelection(this.newAddTableArrs[_index_], true);
        }
      });
    },

    //下移
    downMoveHandler(tTable){
      let arrs_sel = this.seqSelectTr(this.selAddTrArrs, 'reseq');
      const arrs_ = JSON.parse(JSON.stringify(arrs_sel));
      for(let elem of arrs_){
        const _index = this.newAddTableArrs.findIndex((nelem) => {
          return nelem.id == elem.id
        });
        if(_index !== -1){
          _index < (this.newAddTableArrs.length - 1) && this.goingDown(this.newAddTableArrs[_index], _index);
        }
      }

      setTimeout(() => {
        for(let _elem of arrs_){
          const _index_ = this.newAddTableArrs.findIndex((nelem) => {
            return nelem.id == _elem.id
          });
          _index_ !== -1 && this.$refs[tTable].toggleRowSelection(this.newAddTableArrs[_index_], true);
        }
      });
    },
/*给当前选中的所有行,按照表格数据排序
    arrsdata: 当前需要处理的数组
    flag: 是顺序还是倒序
    */
    seqSelectTr(arrsdata, flag){
      let arrs = JSON.parse(JSON.stringify(arrsdata));
      for(let elem of arrs){
        const _index = this.newAddTableArrs.findIndex((nelem) => {
          return nelem.id == elem.id
        });
        _index !== -1 && (elem['_index'] = _index);
      }

      arrs.sort(function (a, b) {
        a = a['_index'];
        b = b['_index'];
        return flag == 'seq' ? a - b : b - a;
      });
      return arrs;
    },

比较简单,但是需要注意的是,上下移动的排序方式是不一样的。以及el-table组件,使用 toggleRowSelection 进行选中时,必须操作当前渲染表格的数组,才会生效。否则不生效

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容