element plus 樹形 橫向 合並 table表格

<el-table class="w100" height="100%" :span-method="spanMethod" :data="state.tableTemData" :cell-style="cellStyle" border :show-header="false">
  <el-table-column align="center" prop="name" label="" />
  <el-table-column align="center" prop="name2" label="時間" />
  <el-table-column align="center" prop="name3" label="" />
  <el-table-column align="center" prop="name4" label="8:00" />
   <el-table-column align="center" prop="name5" label="1111" />
   <el-table-column align="center" prop="name5" label="1111" />
   <el-table-column align="center" prop="name5" label="1111" />
   <el-table-column align="center" prop="name5" label="1111" />
</el-table>

<script setup>
import { reactive } from 'vue-demi'
const state = reactive({
//所需數據格式
tableData: [
    { name: '集控中心', name2: '器器器1', name3: '電壓A', name4: '8:00', name5: '1111', rowspan_0: 11, rowspan_1: 4，rowspan_2: 1 },
    { name: '集控中心', name2: '器器器1', name3: '電壓B', name4: '8:00', name5: '1111', rowspan_0: 0, rowspan_1: 0, rowspan_2: 1 },
    { name: '集控中心', name2: '器器器1', name3: '電壓C', name4: '8:00', name5: '1111', rowspan_0: 0, rowspan_1: 0, rowspan_2: 1 },
    { name: '集控中心', name2: '器器器1', name3: '電壓D', name4: '8:00', name5: '1111', rowspan_0: 0, rowspan_1: 0, rowspan_2: 1 },
    { name: '集控中心', name2: '器器器2', name3: '電壓E', name4: '8:00', name5: '1111', rowspan_0: 0, rowspan_1: 2, rowspan_2: 1 },
    { name: '集控中心', name2: '器器器2', name3: '電壓F', name4: '8:00', name5: '1111', rowspan_0: 0, rowspan_1: 0, rowspan_2: 1 },
    { name: '集控中心', name2: '器器器3', name3: '電壓G', name4: '8:00', name5: '1111', rowspan_0: 0, rowspan_1: 3, rowspan_2: 1 },
    { name: '集控中心', name2: '器器器3', name3: '電壓H', name4: '8:00', name5: '1111', rowspan_0: 0, rowspan_1: 0, rowspan_2: 1 },
    { name: '集控中心', name2: '器器器3', name3: '電壓I', name4: '8:00', name5: '1111', rowspan_0: 0, rowspan_1: 0, rowspan_2: 2 },
    { name: '集控中心', name2: '器器器4', name3: '電壓J', name4: '8:00', name5: '1111', rowspan_0: 0, rowspan_1: 2, rowspan_2: 0 },
    { name: '集控中心', name2: '器器器4', name3: '電壓K', name4: '8:00', name5: '1111', rowspan_0: 0, rowspan_1: 0, rowspan_2: 1 },
  ],
//原數據格式
  treeData: [
    {
      name: '集控中心',
      children: [
        {
          name2: '時間',
          children: [{ name3: '', name4: '8:00', name5: '1111' }]
        },
        {
          name2: '器器器1',
          children: [
            { name3: '電壓A', name4: '8:00', name5: '1111' },
            { name3: '電壓B', name4: '8:00', name5: '1111' }
          ]
        },
        {
          name2: '器器器2',
          children: [
            { name3: '電壓A', name4: '8:00', name5: '1111' },
            { name3: '電壓B', name4: '8:00', name5: '1111' }
          ]
        },
        {
          name2: '器器器3',
          children: [
            {
              name3: '電壓A',
              children: [
                { name4: '8:00', name5: '1111' },
                { name4: '8:00', name5: '1111' }
              ]
            },
            {
              name3: '電壓B',
              children: [
                { name4: '8:00', name5: '1111' },
                { name4: '8:00', name5: '1111' }
              ]
            },
            { name3: '電壓C', name4: '8:00', name5: '1111' }
          ]
        },
        {
          name2: '器器器4',
          children: [
            { name3: '電壓A', name4: '8:00', name5: '1111' },
            { name3: '電壓B', name4: '8:00', name5: '1111' },
            { name3: '電壓B', name4: '8:00', name5: '1111' },
            
          ]
        },
      ]
    }
  ],
  count: 0,
  tableTemData: [],
  maxArr: []
})

function tree_To_table(arr, num) {
  arr.forEach((item, index) => {
    //   初始化數量
    state.count = 0
    if (item.children) {
      // 計算所有所有子集數量
      getnum(item.children)
      item['rowspan_' + num] = state.count
      //   深復制后刪除children，否則可能會造成死循環
      let itemVar = JSON.parse(JSON.stringify(item))
      delete itemVar.children
      item.children.forEach((m, n) => {
        //   將除第一行之外的重置為0
        if (n != 0) {
          for (let o = 0; o <= num; o++) {
            itemVar['rowspan_' + o] = 0
          }
        }
        // 合並父子級
        Object.assign(m, itemVar)
      })
      tree_To_table(item.children, num + 1)
    } else {
      item['rowspan_' + num] = 1
      state.maxArr.push(num)
      state.tableTemData.push(item)
    }
  })
}
tree_To_table(state.treeData)
function getnum(arr) {
  arr.forEach((item, index) => {
    if (item.children) {
      getnum(item.children)
    } else {
      state.count += 1
    }
  })
}
const spanMethod = ({ row, column, rowIndex, columnIndex }) => {
  let index = state.tableTemData.indexOf(row)
  if (columnIndex < Math.max(...state.maxArr)) {
    let rowspan = row['rowspan_' + columnIndex]
    if (rowIndex == 0 && columnIndex == 0) {
      rowspan = state.tableTemData.length
    }
    return {
      rowspan,
      colspan: rowspan == 0 ? 0 : 1
    }
  }
  return {
    rowspan: 1,
    colspan: 1
  }
}
function cellStyle({ row, column, rowIndex, columnIndex }) {
  if (columnIndex < Math.max(...state.maxArr) || rowIndex == 0) {
    return 'background:rgba(50, 247, 255, 0.08)'
  }
}
</script>