1、實現效果

共N行，但是每一列對應的單元格列數固定，行數不固定

2、實現方式

說明：使用的是vue2 + elementUI表格組件 + js實現

 <template><div class="table-container" ><el-table  height="100%" :span-method="spanMethod" :data="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></div></template><script>export default {data() {return {//所需數據格式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: '單位B-A',children: [{name2: '視頻',children: [{ name3: '0000s', children:[{name4: '5G'},{name4: '有線網'}] }]},{name2: '視頻',children: [{ name3: ':0000s',children: [{name4: '5G'},{name4: '有線網'}] },{ name3: ':0000s', children:[{name4: '5G'},{name4: '有線網'}] }]},{name2: '視頻3',children: [{ name3: '0000s', children:[{name4: '5G'},{name4: '有線網'}] },{ name3: '8976s', children:[{name4: '5G'},{name4: '有線網'}] }]}]}, {name: '單位A-C',children: [{name2: '5視頻1',children: [{ name3: 'xxx', children:[{name4: '5G'},{name4: '有線網'}] }]},{name2: '視頻2',children: [{ name3: ':0000s',children: [{name4: '5G'},{name4: '有線網'}] },{ name3: ':0000s', children:[{name4: '5G'},{name4: '有線網'}] }]}]}],count: 0,tableTemData: [],maxArr: []};},mounted() {this.tree_To_table(this.treeData, 0);},methods: {tree_To_table(arr, num) {arr.forEach((item, index) => {//   初始化數量this.count = 0if (item.children) {// 計算所有所有子集數量this.getnum(item.children)item['rowspan_' + num] = this.count//   深復制后刪除children，否則可能會造成死循環let itemVar = JSON.parse(JSON.stringify(item))delete itemVar.childrenitem.children.forEach((m, n) => {//   將除第一行之外的重置為0if (n != 0) {for (let o = 0; o <= num; o++) {itemVar['rowspan_' + o] = 0}}// 合并父子級Object.assign(m, itemVar)})this.tree_To_table(item.children, num + 1)} else {item['rowspan_' + num] = 1this.maxArr.push(num)this.tableTemData.push(item)}})},getnum(arr) {arr.forEach((item, index) => {if (item.children) {this.getnum(item.children)} else {this.count += 1}})},spanMethod ({ row, column, rowIndex, columnIndex }) {let index = this.tableTemData.indexOf(row)if (columnIndex < Math.max(...this.maxArr)) {let rowspan = row['rowspan_' + columnIndex]// 這里可以特殊處理：設置第一列橫跨所有行// if (rowIndex == 0 && columnIndex == 0) {//    rowspan = this.tableTemData.length// }return {rowspan,colspan: rowspan == 0 ? 0 : 1}}return {rowspan: 1,colspan: 1}},cellStyle({ row, column, rowIndex, columnIndex }) {return {backgroundColor: 'rgba(50, 247, 255, 0.08)'}}}}</script>
<style lang="scss">
.table-container {width: 100%;overflow-x: auto; /* 橫向滾動條，如果內容過寬 */
}table {width: 100%;border-collapse: collapse;
}td {border: 1px solid #ccc;padding: 8px;text-align: center;background-color: #f9f9f9;
}
</style>

end~
希望記錄的問題能幫助到你