elementUI实现用卡片展示不同内容表单，合并第一列相同内容，并使合并列内容置顶

本文想用卡片形式将表单的内容显示出来，也就是说我的数据是数组的数组，每个数组内容用一个表单来显示，列如：trackData=[[{id:1,name:'a',role:'aa'},{id:2,name:'a',role:'bb'}],[{id:3,name:'b',role:'aa'},{id:4,name:'b',role:'cc'}]]，也就是数组中有两个子数组，类似这样的数据我想把name为a的数据单独用一个卡片嵌套表单的形式展示出来,name为b的数据则用另一个卡片嵌套表单显示，以此类推显示所有数据，然后把name列合并，并把name值置顶。
首先我获取了trackData之后，则要将trackData的数据进行遍历，得到合并索引数组，然后再通过table的span-method实现合并列,
定义数据合并索引：

spanArr:[], //索引数组
pos:0, //索引

数据遍历：

getSpanArr(){
        for (let j=0;j

然后我们就得到了合并索引数组spanArr，接下来对几个表单数据进行合并，有一个关键就是要获取表单数组在trackData中的索引，可以通过:span-method="(span)=>arrSpanMethod(param,index)"传递index索引

//表格相同值的行合并
      arraySpanMethod({row, column, rowIndex, columnIndex},index){
        if(columnIndex === 0){
          let _row = this.spanArr[index][rowIndex];
          let _col = _row > 0 ? 1: 0;
            return {
              rowspan: _row,
              colspan: _col
            };
        }
      }

接下来将合并的列值置顶显示：

:cell-style="{'vertical-align':'top'}"

完成！