vue3table列表合并列相同数据

弹窗内table，合并第一列和第二列相同数据

<script setup lang="ts">
import { onMounted, PropType, reactive, ref, watch } from 'vue'
import { useTable } from '@/hooks/web/useTable'
import { getfuncListbyId } from '@/api/DockingManagement/index'
import { Table } from '@/components/Table'
import { CrudSchema, useCrudSchemas } from '@/hooks/web/useCrudSchemas'
const props = defineProps({
  currentRow: {
    type: Object as any,
    default: () => undefined
  }
})

// 列表
const PageList = async () => {
  const res = await getfuncListbyId(props.currentRow.id)
  return {
    list: res.data,
    total: 0
  }
}
const { tableRegister, tableState } = useTable({
  fetchDataApi: async () => {
    const res = await PageList()
    return {
      list: res.list || [],
      total: 0
    }
  }
})
const { loading, dataList } = tableState

const crudSchemas = reactive<CrudSchema[]>([
  {
    field: 'primaryModule',
    label: '一级模块',
    form: {
      hidden: true
    },
    search: {
      hidden: true
    },
    detail: {
      hidden: true
    },
    table: {
      hidden: false
    }
  },
  {
    field: 'secondaryModule',
    label: '二级模块',
    form: {
      hidden: true
    },
    search: {
      hidden: true
    },
    detail: {
      hidden: true
    },
    table: {
      hidden: false
    }
  },
  {
    field: 'name',
    label: '能力名称',
    form: {
      hidden: true
    },
    search: {
      hidden: true
    },
    detail: {
      hidden: true
    },
    table: {
      hidden: false
    }
  },
])
const { allSchemas } = useCrudSchemas(crudSchemas)

// 存放所有的表头 一定要与dataList.value一致
const colFields = reactive<string[]>([
  'primaryModule',
  'secondaryModule',
  'name',
  'code',
  'description'
])

// 合并单元格的方法
const objectSpanMethod = ({ row, column, rowIndex, columnIndex }) => {
  // 合并一样的班级列 primaryModule属性
  if (columnIndex === 0) {
    if (
      rowIndex === 0 ||
      (rowIndex > 0 && row.primaryModule !== dataList.value[rowIndex - 1]?.primaryModule)
    ) {
      let rowspan = 1
      for (let i = rowIndex + 1; i < dataList.value.length; i++) {
        if (dataList.value[i].primaryModule === row.primaryModule) {
          rowspan++
        } else {
          break
        }
      }
      return { rowspan, colspan: 1 }
    } else {
      return { rowspan: 0, colspan: 0 }
    }
  }

  // 合并一样的性别列 secondaryModule属性
  if (columnIndex === 1) {
    if (
      rowIndex === 0 ||
      (rowIndex > 0 && row.secondaryModule !== dataList.value[rowIndex - 1]?.secondaryModule)
    ) {
      let rowspan = 1
      for (let i = rowIndex + 1; i < dataList.value.length; i++) {
        if (dataList.value[i].secondaryModule === row.secondaryModule) {
          rowspan++
        } else {
          break
        }
      }
      return { rowspan, colspan: 1 }
    } else {
      return { rowspan: 0, colspan: 0 }
    }
  }
}
</script>

<template>
  <Table
    :spanMethod="objectSpanMethod"
    :columns="allSchemas.tableColumns"
    :data="dataList"
    :loading="loading"
    @register="tableRegister"
    height="53vh"
    border
  />
</template>