handsontable下拉数字递增效果vue

实现的效果如下图所示：拖动表格下拉后，数字逐个递增（默认是复制填充）

1.html部分代码

2.表格的配置信息

data(){
    return {
        hotSettings: {
        rowHeaders: true, //左边数字
        colHeaders: [
          "<span class='must'>*</span>箱 号",
          "<span class='must'>*</span>实重 kg",
          "长 cm",
          "宽 cm",
          "高 cm",
          "材积重 kg",
          "立方 m³",
          "<span style='font-weight:bold'>计费重 kg</span>",
          "操 作"
        ], //表头信息
        licenseKey: "non-commercial-and-evaluation", //注册码
        colWidths: 76, //宽
        height: "auto", //高
        copyable: true, // 允许键盘复制
        columns: [], //固定表格列对应的字段
        // contextMenu: {
          //右击菜单
          // items: {
          //   row_above: {
          //     name: "向上插入一行",
          //   },
          //   row_below: {
          //     name: "向下插入一行",
          //   },
          //   remove_row: {
          //     name: "删除行",
          //   },
          // },
        // },
        minSpareRows:6,//默认加6个空行
        data: [],
        afterChange: this.afterChange,
        beforeAutofillInsidePopulate:this.beforeAutofillInsidePopulate,
        afterSelectionByProp :this.afterSelectionByProp ,
        afterSelectionEndByProp:this.afterSelectionEndByProp
      },
      direction_s:'',//记录拖动方向
      num_p:'',  //获取的初始状态，只得到一次
      second: 0,  //循环递增的数
      num_st : 0,
      num_end : 0,  //记录数字的位置
      getNum : 0,  //截取的数字字符
      num_new:'',
      num_zhi : 0,  //统计循环次数
      num_f:'',  //选中单元格的个数 
    }
}

3.js中需要用到三个钩子函数beforeAutofillInsidePopulate，afterSelectionByProp，afterSelectionEndByProp，afterChange

1.beforeAutofillInsidePopulate获取操作方向记录下来

beforeAutofillInsidePopulate(index,direction,data,baseRange){//此钩子函数为了获取拖动放下记录下来

      this.direction_s = direction;//获取操作方向

    },

 2.afterSelectionByProp数字递增逻辑写在这个里面（注：deepClone为深拷贝，可自行安装插件或者用其他的深拷贝方法）

afterSelectionByProp(r,p,r2,p2){//r1 r2为选中的起始和结束的纵坐标，p为起始和结束的属性

      let hot=this.$refs.hotTableComponent



      if(p!=p2||p!='boxNo'){//横向拖动表格不做任何效果，且只有箱号需要递增效果

        return

      }

      if(r==r2){//如果只点击一个格子，不做任何操作

        this.num_p=''

        return

      }else{

        this.num_p =deepClone(hot.hotInstance.getSourceData())//获取表格当前的数据

      }

      var m = this.hotSettings.data[r].boxNo;  //当前单元格中的箱号值

      for(let j=r;j<r2;j++){//循环已选中的表格

        m=hot.hotInstance.getSourceData()[j].boxNo?hot.hotInstance.getSourceData()[j].boxNo:m

        let get_end=''

        if(r2 != r){  //方法只执行一次

        this.num_f = r2 - r;

        }

       

        if(this.second == 0){

          for(var i = m.length-1; i >= 0; i--) {

              if(!isNaN(m.charAt(i))){//判断当前是否是数字

                this.num_st = i;

                if(this.num_end == 0){

                  this.num_end = i;

                }

              }else{

                if(this.num_st == 0){

                  continue;

                }else{

                  break;

                }

              }

          }

          if(this.num_st == this.num_end){

            this.getNum = m.substring(this.num_st);  //数字段

            get_end = "";

          }else{

           

          this.getNum = m.substring(this.num_st,this.num_end+1);  //数字段

            if((this.num_end+1)==m.length){

              get_end = m.substring(m.length);

            }else{

            get_end = m.substring(this.num_end+1,m.length);

            }

          }

        }

        if(r2 != r){  //选中多个的时候执行

            let list_new=''

            let endNum = String(this.getNum).charAt(this.getNum.length-1)

            let startStr = String(this.getNum).substring(0,this.getNum.length-1)

            if(endNum!=9){

                this.getNum =startStr+ (endNum*1 + 1);

            }else{

              console.log(this.getNum*1)

              let numLength=String(this.getNum*1).length

              let zeroLength=this.getNum.length-numLength

              // console.log(zeroLength+'零长度')

              // console.log(numLength+'数字长度')

              // console.log(this.getNum.length+'所有数字长度')

              // console.log(this.getNum.substring(0,zeroLength))

                let differenceLength=String(this.getNum*1 + 1).length-numLength

                this.getNum =this.getNum.substring(0,zeroLength-differenceLength  )+(this.getNum*1 + 1);

             

            }

                // console.log(this.getNum)

           

            switch(this.direction_s){

              case "down":

                list_new = m.substring(0,this.num_st)+this.getNum+get_end;

                this.$set(this.num_p[j*1+1],'boxNo',list_new)

                  break;

              // case "up":

              //   list_new = m.substring(0,this.num_st)+this.getNum+get_end;

              //   this.num_p[j*1-1].boxNo = list_new;

              //     break;

              default:

                console.log("添加错误")

            }

        }

        this.second ++;

      }

    },

 3.afterSelectionEndByProp中重置初始化的变量

afterSelectionEndByProp(){//重置初始化的变量

      this.second = 0;

      this.num_st = 0;

      this.num_end = 0;

      this.getNum = 0;

    },

4.afterChange中将改变后的值重新渲染表格

afterChange(changeData, source) {

      if(source=='Autofill.fill'&&this.num_p!=''){

         let hot=this.$refs.hotTableComponent

          this.hotSettings.data=deepClone(this.num_p)

          hot.hotInstance.loadData(this.num_p)

      }

    },