table

<n-data-table :columns="columns" :data="state.data" :single-line="false" />

columns

const columns = computed(() => {
  let arr: any = []
  arr = [
    ...arr,
    {
      title: '序号',
      key: 'row',
      render(row, index) {
        return h('span', [index + 1])
      },
      width: 100
    },
    {
      title: '标记类型',
      key: 'tagType',
      rowSpan: (rowData: any, rowIndex: number) => {
        return getFinalNum( rowIndex, [rowData.tagType], ["tagType"]);
      },
      render(row: any) {
        return h('div',{ class: 'flex items-center justify-between' },
          [`${row.tagType}`]
        )
      }
    },
    {
      title: '标记评级',
      key: 'level',
      render(row: any) {
        return h(
          'div',
          {
            class: 'flex items-center justify-between'
          },
          [`${row.level}`]
        )
      }
    },
    {
      title: '标记区间',
      key: 'tags',
      width: 300,
      render(row: any) {
        return h(
          'div',
          {
            class: 'flex items-center justify-between'
          },
          [
            h(
              NInputNumber,
              {
                class: 'mr-[10px]',
                value: row.tagBegin,
              }
            ),
            h(
              NInputNumber,
              {
                value: row.tagEnd,
              }
            )
          ]
        )
      }
    },
  ]
  return arr
})

合并函数

// 这个函数用于获取相同数据的最后一行的索引,根据返回的索引实现合并需求
const getFinalNum = (index: number, datas: any[], types: any[]) => {
  const sameData = state.data?.slice(index).findIndex((item) => {
    return datas.some((name, i) => item[types[i]] !== name);
  });
  return sameData === -1 ? state.data?.length  : sameData;
};

数据格式

[
    {
      "id": 1,
      "tagType": 3,
      "level": 1,
      "tagBegin": 0,
      "tagEnd": 25
    },
    {
      "id": 2,
      "tagType": 3,
      "level": 2,
      "tagBegin": 25,
      "tagEnd": 50
    },
    {
      "id": 3,
      "tagType": 3,
      "level": 3,
      "tagBegin": 50,
      "tagEnd": 75
    },
    {
      "id": 4,
      "tagType": 3,
      "level": 4,
      "tagBegin": 75,
      "tagEnd": 101
    }
  ]