Ant Design Vue TreeSelect组件自定义表格行合并

需求

将前面两列相同的数据合并成一个，效果图如下

官方实例

我用的Antd版本号为：1.7.8，下图是官方实例，从这我们可以看出实际靠obj当中的attrs属性值里面加入colSpan或者rowSpan来控制合并行列

思路

首先向后端请求List数据集合过来，然后从中获取对应的数据知道要合并多少列再赋值给rowSpan。由于我后端传过来的list集合种并无rowSpan函数，所以需要我们往原有得集合种加入该属性值，此处我借鉴了网上不少前辈们写的例子，后面结合如下代码。思路大部分都写在注释里面了

initData() {
      queryLogData(this.Bdate, this.Edate).then(res => {
        let a = this.createNewArr(res.data.tableData)  //第一列要合并的
        this.data = this.createNewArrTwo(a);           //第二列要合并的
      })
    },
createNewArr(data) {     //data为传入的list集合
      let dataSource = data.reduce((result, item) => {
        // 首先将oneTitle字段作为新数组result取出
        if (result.indexOf(item.oneTitle) < 0) { 
          result.push(item.oneTitle)
        }
        return result
      }, []).reduce((result, oneTitle) => {
        // 将oneTitle相同的数据作为新数组取出，并在其内部添加新字段**rowSpan**
        const children = data.filter(item => item.oneTitle === oneTitle) //筛选相同的字段，目的其实就是想知道具体要合并多少列
        result = result.concat( //开始拼接上一次数组合并成新数组
          children.map((item, index) => ({
              ...item,
              rowSpan: index === 0 ? children.length : 0, // 将第一行数据添加rowSpan字段
            })
          )
        )
        return result
      }, [])
      return dataSource
    },
//下面部分createNewArrTwo得代码基本一致，就不写了，无非就是换了字段      

上面用到得JS学习教程

Js 中reduce使用

一、语法

arr.reduce(function(prev,cur,index,arr){
…
}, init);

其中，
arr 表示原数组；
prev 表示上一次调用回调时的返回值，或者初始值 init;
cur 表示当前正在处理的数组元素；
index 表示当前正在处理的数组元素的索引，若提供 init 值，则索引为0，否则索引为1；
init 表示初始值。

看上去是不是感觉很复杂？没关系，只是看起来而已，其实常用的参数只有两个：prev 和 cur。接下来我们跟着实例来看看具体用法吧~

二、实例

先提供一个原始数组：

var arr=[3,9,4,3,6,0,9];

实现一下需求的方式有很多，其中就包含使用reduce()的求解方式，也算是实现起来比较简洁的一种吧。

1.求数组项之和

var sum=arr.reduce((prev,cur)=>{
    return prev+cur
},0)

2.求数组项最大值

var max=arr.reduce((prev,cur)=>{
  return Math.max(prev,cur)  
}，0)

3.数组去重

var newArr=arr.reduce((prev,cur)=>{
   if(prev.indexOf(cur)===-1){
     prev.push(cur)
   }
},[])

重点总结：

reduce() 是数组的归并方法，与forEach()、map()、filter()等迭代方法一样都会对数组每一项进行遍历，但是reduce() 可同时将前面数组项遍历产生的结果与当前遍历项进行运算，这一点是其他迭代方法无法企及的

filter()，用于筛选数组中满足条件的元素，返回一个筛选后的新数组

var arr=[-2,-5,10,30,5,6]
var minus = arr.filter(function(item,index,array){
    return item < 0;
});
console.log(minus);   // [-2, -5]

可以看到，示例中是要筛选出数组arr中的所有负数，所以该方法最终返回一个筛选后的新数组[-2, -5]。

数组的 concat 方法

数组 concat 方法用于多个数组的合并。它将新数组的成员，添加到原数组成员的后部，然后返回一个新数组，原数组不变。

['hello'].concat(['world'])
// ["hello", "world"]

['hello'].concat(['world'], ['!'])
// ["hello", "world", "!"]

[].concat({a: 1}, {b: 2})
// [{ a: 1 }, { b: 2 }]

[2].concat({a: 1})
// [2, {a: 1}]

除了数组作为参数，concat也接受其他类型的值作为参数，添加到目标数组尾部。

map()，用于遍历数组，返回处理之后的新数组

var newArr = arr.map(function(item,index,array){
    return item * 2;
});
console.log(newArr);   // [2,-4,6,8,-10]

可以看到，该方法与forEach()的功能类似，只不过map()具有返回值，会返回一个新的数组，这样处理数组后也不会影响到原有数组。

以上教程均来自于广大网友，非常感谢，