0
点赞
收藏
分享

微信扫一扫

正则表达式记录

自信的姐姐 2024-08-31 阅读 23

 

 表格数据

 tableData: [
        {
          id: "1",
          date: "2016-05-03",
          name: "王小虎",
          province: "上海",
          city: "普陀区",
          address: "上海市普陀区金沙江路 1518 弄",
          zip: 200333,
          articleNumber: 10,
          zipNumber: 15,
        },
        {
          id: "1",
          date: "2016-05-02",
          name: "王小虎",
          province: "上海",
          city: "普陀区",
          address: "上海市普陀区金沙江路 1518 弄",
          zip: 200333,
          articleNumber: 10,
          zipNumber: 15,
        },
        {
          id: "2",
          date: "2016-05-04",
          name: "王小虎",
          province: "上海",
          city: "普陀区",
          address: "上海市普陀区金沙江路 1518 弄",
          zip: 200333,
          articleNumber: 10,
          zipNumber: 15,
        },
        {
          id: "3",
          date: "2016-05-01",
          name: "王小虎",
          province: "上海",
          city: "普陀区",
          address: "上海市普陀区金沙江路 1518 弄",
          zip: 200333,
          articleNumber: 10,
          zipNumber: 15,
        },
        {
          id: "3",
          date: "2016-05-08",
          name: "王小虎",
          province: "上海",
          city: "普陀区",
          address: "上海市普陀区金沙江路 1518 弄",
          zip: 200333,
          articleNumber: 10,
          zipNumber: 15,
        },
        {
          id: "3",
          date: "2016-05-06",
          name: "王小虎",
          province: "上海",
          city: "普陀区",
          address: "上海市普陀区金沙江路 1518 弄",
          zip: 200333,
          articleNumber: 10,
          zipNumber: 15,
        },
        {
          id: "4",
          date: "2016-05-07",
          name: "王小虎",
          province: "上海",
          city: "普陀区",
          address: "上海市普陀区金沙江路 1518 弄",
          zip: 200333,
          articleNumber: 10,
          zipNumber: 15,
        },
      ],

  // 计算每行需要合并的数量   tableData为请求获取的表格数据源
  getSpanArr() {
    this.spanArr = [];
    for (let i = 0; i < this.tableData.datalist.length; i++) {
      if (i === 0) {
        this.spanArr.push(1);
        this.pos = 0;
      } else {
        // 判断当前元素与上一个元素的ID是否相同
        if (this.tableData.datalist[i].productId === this.tableData.datalist[i - 1].productId) {
          this.spanArr[this.pos] += 1;
          this.spanArr.push(0);
        } else {
          this.spanArr.push(1);
          this.pos = i;
        }
      }
    }

getSpanArr 方法:这个方法用于计算每一行需要合并的数量,并存储在 spanArr 数组中。使用 productId 来判断当前行是否与前一行相同,如果相同则增加合并数量,否则重置合并计数。

 

支持不合并的列,增加判断条件即可,如:不合并第五列 :  columnIndex !== 5 


  // 根据列索引和 spanArr 中的值来确定单元格的 rowspan 和 colspan
  objectSpanMethod({ row, column, rowIndex, columnIndex }) {
    // 页面列表上 表格合并行 -> 第几列(从0开始)
    // 需要合并多个单元格时 依次增加判断条件即可
    if (columnIndex !== 4 && columnIndex !== 5 && columnIndex !== 6) { 
      const _row = this.spanArr[rowIndex];
      const _col = _row > 0 ? 1 : 0;
      return {
        rowspan: _row,
        colspan: _col
      };
    } else {
      return false;
    }

 objectSpanMethod 方法: 这个方法根据列索引和 spanArr 中的值来确定单元格的 rowspan 和 colspan,从而实现表格行的合并。 我这里的需求是排除第4、5和6列的合并(基于0索引),其他列根据 spanArr 来设置合并属性。

 getDataList() {
    //。。。。。
    this.tableData = res;
    //中间获取列表数据
    this.getSpanArr();
}

 

举报

相关推荐

0 条评论