VxeTable3合并固定列-更新2.0

使用官方的vxeTable做复杂的合并表格的时候，官方支持自定义合并规则，但是没有给固定的通用模板手搓了一个以此记录一下，可以封装成全局公共工具方法

  /**
     *vxeTable计算固定合并列
     * @param FixedColumnIndex 固定列索引
     */
    computedCheckBox(FixedColumnIndex = 0) {
      const arr = this.tableData.map(item => item.age)//所有数据-过滤出所需字段
      let start = 0;
      let end = 0;

      for (let i = 1; i < arr.length; i++) {
        if (arr[i] !== arr[i - 1]) {
          this.mergeCells.push({
            row: start,
            col: FixedColumnIndex,
            rowspan: end - start + 1,
            colspan: FixedColumnIndex
          });
          start = i;
        }
        end = i;
      }
      this.mergeCells.push({
        row: start,
        col: FixedColumnIndex,
        rowspan: end - start + 1,
        colspan: FixedColumnIndex
      });
    }

今天又来更新了，上次写的这个版本小编发现还是有些bug，比如空字符也会一起合并，但是这是不合理的。经过正式环境的检测，我优化一版，性能高，通用逻辑性强。 更新时间：2023年12月28日 10 :11 :52

这是合并固定列的源代码

 /**
     *vxeTable计算固定合并列
     * @param FixedColumnIndex 固定列索引
     * @param arr 固定字段数据
     */
    computedCheckBox(FixedColumnIndex, arr) {
      if (!arr) {
        return
      }
      let start = 0;
      let end = 0;
      for (let i = 1; i < arr.length; i++) {
        if (arr[i] !== arr[i - 1]) {
          this.mergeCells.push({
            row: start,
            col: FixedColumnIndex,
            rowspan: end - start + 1,
            colspan: 1
          })
          start = i;
        }
        if (!arr[i]) {
          start = i;
        }
        end = i;
      }
      this.mergeCells.push({
        row: start,
        col: FixedColumnIndex,
        rowspan: end - start + 1,
        colspan: 1
      });

    }

使用方式

 this.computedCheckBox(2, this.tableData.map(item => item.toStopId))//所有数据-过滤出所需字段)
 this.computedCheckBox(3, this.tableData.map(item => item.toStopId))//所有数据-过滤出所需字段)
 this.computedCheckBox(5, this.tableData.map(item => item.startDate))//所有数据-过滤出所需字段)

效果图

对比 官方给的两种方式

第一种，span-method官方给的通用合并方式，但是实际有bug，当快速下拉的时候会造成单元格塌陷错位等。不稳定，官方也说了是评估期间

第二种，merge-cells稳定些，但是要自己写合并逻辑复杂一点，但是好用灵活。推荐第二种方式