element-plus表格组件动态渲染数据后在合并单元格踩的坑

在项目中，经常需要从后端获取数据后，在动态渲染表格。elementui的表格组件，提供了合并单元格的方法，添加一个属性span-method。
但是在开发过程中发现，span-method只对静态数据有效，就是span-method只会依据表格第一次渲染的数据来渲染，表格数据在请求后端后数据更新了，span-method的规则并不会重新执行

先说一下实现如下效果的方法

合并指标名称相同的相邻行

声明一个函数filterData，用于处理获取到的数据

// dom部分
<el-table :data="tableData" class="table-class" :height="tableH"
 :span-method="objectSpanMethod">
	......
</el-table>
// js部分
const state = reactive({
       spanArr: []// 生成一个与行数相同的数组记录每一行设置的合并数
   })
   const objectSpanMethod = ({row, column, rowIndex, columnIndex}) => {
       if (columnIndex === 0) {
         if(state.spanArr[rowIndex]){
           return {
             rowspan: state.spanArr[rowIndex],
             colspan: 1
           }
         }else{
           return {
             rowspan: 0,
             colspan: 0
           }
         }
       }else {
         return {
           rowspan: 1,
           colspan: 1
         }
       }
   }
 const filterData = (data) => {// 合并内容相同的单元格
    let contactDot = 0;
    let spanArr = [];
    data.forEach((item, index) => {
      if (index === 0) {
        spanArr.push(1)
      } else {
        //注释：name  是对应体系,data 对应table绑定的数据源
        if (item.name === data[index - 1].name) {
          spanArr[contactDot] += 1;
          spanArr.push(0)
        } else {
          contactDot = index
          spanArr.push(1)
        }
      }
    })
    state.spanArr = spanArr;
  }

要点在于filterData函数执行的时机

如果在父组件中，获取数据后直接执行filterData函数，然后将tableData和spanArr传给表格子组件，此时的子组件并不会重新更新合并规则，达不到想要的效果。
filterData函数的执行，需要放在子组件的watch中

 watch(props, (newVal, oldVal) => {
         filterData(props.tableData)// 在监测到tableData有更新后调用filterData
     }
     , {
         deep: true
     }
 )

这样就能达到合并的目的了