elementui如何合并表格

问题遇到的现象和发生背景

目前想要对elementui的表格进行合并

问题相关代码,请勿粘贴截图

以下是我的数据结构


[
        {
          "category": "牛",
          "currentQuantity": 110,
          "details": [
            {
              "category": "牛",
              "vaccineShortName": "口蹄疫",
              "finals": 33,
              "nots": 1,
              "notChildrens": 0,
              "notIlls": 0,
              "notPregnancies": 1,
              "completedDensity": "97.06",
              "planQuantity": 400,
              "surveyDensity": "8.25"
            },
            {
              "category": "牛",
              "vaccineShortName": "布病",
              "finals": 127,
              "nots": 6,
              "notChildrens": 2,
              "notIlls": 1,
              "notPregnancies": 3,
              "completedDensity": "95.49",
              "planQuantity": 500,
              "surveyDensity": "25.4"
            }
          ]
        },
        {
          "category": "羊",
          "currentQuantity": 211,
          "details": [
            {
              "category": "羊",
              "vaccineShortName": "口蹄疫",
              "finals": 165,
              "nots": 41,
              "notChildrens": 20,
              "notIlls": 0,
              "notPregnancies": 21,
              "completedDensity": "80.1",
              "planQuantity": 255,
              "surveyDensity": "64.71"
            },
            {
              "category": "羊",
              "vaccineShortName": "布病",
              "finals": null,
              "nots": null,
              "notChildrens": null,
              "notIlls": null,
              "notPregnancies": null,
              "completedDensity": 0,
              "planQuantity": 11,
              "surveyDensity": "0"
            },
            {
              "category": "羊",
              "vaccineShortName": "小反刍兽疫",
              "finals": null,
              "nots": null,
              "notChildrens": null,
              "notIlls": null,
              "notPregnancies": null,
              "completedDensity": 0,
              "planQuantity": 12,
              "surveyDensity": "0"
            },
            {
              "category": "羊",
              "vaccineShortName": "包虫病",
              "finals": null,
              "nots": null,
              "notChildrens": null,
              "notIlls": null,
              "notPregnancies": null,
              "completedDensity": 0,
              "planQuantity": 0,
              "surveyDensity": "0"
            }
          ]
        },
      ]

现在在合并的时候我想把vaccineShortName这个字段分开成多行展示,目前是一行

运行结果及报错内容
我的解答思路和尝试过的方法
我想要达到的结果

现在在合并的时候我想把vaccineShortName这个字段分开成多行展示,目前是一行,以下是我想要的结果

img

用:span-method="arraySpanMethod"
https://element.eleme.cn/#/zh-CN/component/table


:span-method="arraySpanMethod"

img


我写的文档https://blog.csdn.net/weixin_45753961/article/details/122577525



/合并日期列调用函数/
dateSetdates(arr) {
var obj = {},
k, arr1 = [];
for (var i = 0, len = arr.length; i < len; i++) {
k = arr[i].date; //这里为了合并日期列
if (obj[k])
obj[k]++;
else
obj[k] = 1;
}
for (var o in obj) {
for (let i = 0; i < obj[o]; i++) {
if (i === 0) {
this.arr1.push(obj[o])
} else {
this.arr1.push(0)
}
}
}
},
//合并列
objectSpanMethod({
row,
column,
rowIndex,
columnIndex
}) {
/*判断条件columnIndex=1为第几列,不是判断条件,arr1[rowIndex]为第1列要合并几行*/
/*合并日期列调用函数*/
if (columnIndex === 1) {
let _row = this.arr1[rowIndex];
let _col = this.arr1[rowIndex] > 0 ? 1 : 0;
return {
rowspan: _row,
colspan: _col
};
}
},