ant design vue：列值相同的行合并

列值相同的行合并，这种需求很常见，找了很多合并行的例子，才解决了我的问题。

难点：

用什么方法可以找到列值相同的行，一番百度，终于找到一个可用的，代码如下：

// 设置每一行的rowSpan
      setRowSpan(data){
         //保存上一个name
         var x = "";
         //相同name出现的次数
         var count = 0;
         //该name第一次出现的位置
         var startindex=0;
         
         for(var i = 0;i<data.length;i++){
                  console.log(data[i].groupName);
           //这里是合并name列，根据各自情况大家可以自己完善
           var val = data[(i)].groupName;
           if(i==0){
             x=val;
             count=1;
             this.myArray[0]=1
           }else{
             if(val==x){
               count++;
               this.myArray[startindex]=count;
               this.myArray[i]=0
             }else{
               count = 1;
               x=val;
               startindex=i;
               this.myArray[i]=1
             }
           }
         }
              console.log(this.myArray);
       },

上面的方法可以生成一个数组，这个数组保存了需要合并的每一行的rowSpan，然后根据index设置每个的rowSpan就可以了。

比如一个5行的表格，1、2、3行值相同，4、5行相同，那么上面的数组就是[3,0,0,2,0]，就是说第1行占3行，第2、3行不占行，这样就相当于把3行合并成1行了，以此类推。

setRowSpan的参数是从接口返回的dataSource，所有需要在loadData之后执行。

loadData在created里执行，这个就不需要多讲了。

loadData(arg) {
        if(!this.url.list){
          this.$message.error("请设置url.list属性!")
          return
        }
        //加载数据 若传入参数1则加载第一页的内容
        if (arg === 1) {
          this.ipagination.current = 1;
        }
        var params = this.getQueryParams();//查询条件
        this.loading = true;
        getAction(this.url.list, params).then((res) => {
          if (res.success) {
            //update-begin---author:zhangyafei    Date:20201118  for：适配不分页的数据列表------------
            this.dataSource = res.result.records||res.result;
            this.setRowSpan(this.dataSource);
            if(res.result.total)
            {
              this.ipagination.total = res.result.total;
            }else{
              this.ipagination.total = 0;
            }
          }else{
            this.$message.warning(res.message)
          }
        }).finally(() => {
          this.loading = false
        })
      },

最后一段关键代码是设置渲染函数，如下代码：

原博客用的是props，但是antd的官网用的是attrs，我试了一下，用props确实没有效果。

{
            title:'组别',
            align:"center",
            dataIndex: 'groupName',
            customRender: (value, row, index) => {
                  const obj = {
                    children: value,
                    attrs: {},
                  };
                  obj.attrs.rowSpan = this.myArray[index];
                  return obj
                }
          },

最终效果：

参考博客：

http://t.csdn.cn/DZnok