来访~180503 文章~121 评论~26
2023年2月1日 作者 张临志

Ant Design of Vue合并行

<a-table>需要列相同行值进行行合并,现整理了下实现代码,使用官方组件的基础上,进行相同值的行进行合并处理逻辑,代码及效果如下:

{
  title:'分类',
  align:"center",
  dataIndex: 'classification_dictText',
  customRender: (value, row, index) =>
    {
      const obj = {
        children: value,
        attrs:{},
      };
      console.log(this.dataSource2)
      let min = 0
      let num = 0
      for (let i = 0;i < this.dataSource2.length;i++) {
        console.log(this.dataSource2[i].classification_dictText)
        console.log(value)
        if (this.dataSource2[i].classification_dictText == value) {
          min = i
          break
        }
      }
      for (let i = 0;i < this.dataSource2.length;i++) {
        if (this.dataSource2[i].classification_dictText == value) {
          num = num +1
        }
      }
      if (index == min) {
        obj.attrs.rowSpan = num;
      }
      let max = min + num
      if (index > min && index< max) {
        obj.attrs.rowSpan = 0;
      }
      return obj;
    }
},
{
  title:'类别',
  align:"center",
  dataIndex: 'category_dictText',
  customRender: (value, row, index) =>
  {
    const obj = {
      children: value,
      attrs:{},
    };
    let min = 0
    let num = 0
    for (let i = 0;i < this.dataSource2.length;i++) {
      if (this.dataSource2[i].category_dictText == value) {
        min = i
        break
      }
    }
    for (let i = 0;i < this.dataSource2.length;i++) {
      if (this.dataSource2[i].category_dictText == value) {
        num = num +1
      }
    }
    if (index == min) {
      obj.attrs.rowSpan = num;
    }
    let max = min + num
    if (index > min && index< max) {
      obj.attrs.rowSpan = 0;
    }
    return obj;
  }
},