要實現這樣的表格，?怎么做呢？
甚至是這種三級的呢？
官網的案例也是通過這個方法進行配置的，也就是說表格長什么樣，關鍵在怎么處理的方法上。
?這是官網的方法，可參考拓展：
const arraySpanMethod = ({row,column,rowIndex,columnIndex,
}: SpanMethodProps) => {if (rowIndex % 2 === 0) {if (columnIndex === 0) {return [1, 2]} else if (columnIndex === 1) {return [0, 0]}}
}const objectSpanMethod = ({row,column,rowIndex,columnIndex,
}: SpanMethodProps) => {if (columnIndex === 0) {if (rowIndex % 2 === 0) {return {rowspan: 2,colspan: 1,}} else {return {rowspan: 0,colspan: 0,}}}
}
不過它這里的方法并不符合我的要求，假如還有四級的呢？
?話不多說，給我的代碼，相關注釋有說明：
<template><div class="container"><Commonhead :title="title"></Commonhead><div class="table"><el-table:span-method="objectSpanMethod"ref="multipleTableRef"border:data="list"><el-table-column label="類型" prop="str1" min-width="180" /><el-table-column label="考核內容" prop="str2" min-width="180" /><el-table-column label="結果" prop="str3" min-width="180" /><el-table-column label="備注" prop="str4" min-width="180" /></el-table></div></div>
</template><script setup>
import Commonhead from "../src/components/Commonhead.vue";
const title = ref("項目管理 > 巡檢記錄 > 巡檢記錄詳情");
onMounted(() => {dealList();
});const multipleTableRef = ref();
const list = ref([// 忽略表格合并，每一行的數據，str1-6，代表幾級數據，也可以簡易理解為第幾列的數據（從上往下順序）{str1: "遵章守法",str2: "（1）工作時間打牌、下棋、串崗或無故脫崗",str3: "是",str4: "備注內容備注內容備注內容",},{str1: "遵章守法",str2: "（2）上班時睡覺、在禁煙區內吸煙、吃東西、看書報、聽收音機及做與工作無關的事情",str3: "不是",str4: "無",},{str1: "崗位職責",str2: "（1）未認真履行崗位職責，保潔工作達不到質量標準，未造成影響和損失",str3: "不是",str4: "無",},
]);// 當前行 row、當前列 column、當前行號 rowIndex、當前列號 columnIndex
// 表格合并的方法
const objectSpanMethod = ({ row, column, rowIndex, columnIndex }) => {// 返回一個包含兩個元素的數組，第一個元素代表 rowspan，第二個元素代表 colspanif (columnIndex === 0) {return {rowspan: row.rowspan,colspan: row.colspan,};} else if (columnIndex === 1) {return {rowspan: row.rowspan2,colspan: row.colspan2,};} else if (columnIndex === 2) {return {rowspan: row.rowspan3,colspan: row.colspan3,};} else {return {rowspan: 1,colspan: 1,};}
};// 處理列表
const dealList = () => {if (list.value.length === 0) return;list.value.forEach((item, index) => {item.colspan = 1;item.rowspan = 1;item.colspan2 = 1;item.rowspan2 = 1;item.colspan3 = 1;item.rowspan3 = 1;});list.value.reverse()for (let i = 0; i < list.value.length; i++) {// 列合并處理if (i + 1 < list.value.length &&list.value[i].str1 == list.value[i + 1].str1) {list.value[i + 1].rowspan = list.value[i].rowspan + 1;list.value[i].rowspan = 0;}if (i + 1 < list.value.length &&list.value[i].str2 == list.value[i + 1].str2) {list.value[i + 1].rowspan2 = list.value[i].rowspan2 + 1;list.value[i].rowspan2 = 0;}if (i + 1 < list.value.length &&list.value[i].str3 == list.value[i + 1].str3) {list.value[i + 1].rowspan3 = list.value[i].rowspan3 + 1;list.value[i].rowspan3 = 0;}// 行合并處理if (list.value[i].str2 == "") {list.value[i].colspan = 2;list.value[i].colspan2 = 0;list.value[i].colspan3 = 0;}if (list.value[i].str3 == "") {list.value[i].colspan = 1;list.value[i].colspan2 = 2;list.value[i].colspan3 = 0;}if (list.value[i].str3 != "") {list.value[i].colspan = 1;list.value[i].colspan2 = 1;list.value[i].colspan3 = 1;}}list.value.reverse();
};// 整理數據列表的數據，將相同的數據段合并
const dataSort = (a, b) => {if (a["str1"] == b["str1"]) {if (a["str2"] == b["str2"]) {if (a["str3"] < b["str3"]) {return -1;}} else {if (a["str2"] < b["str2"]) {return -1;} else {return 1;}}} else {if (a["str1"] < b["str1"]) {return -1;} else {return 1;}}
};
</script><style scoped>
.container {padding: 20px;
}
.table {width: 1000px;margin: 0 auto;
}
</style>
將每一條數據進行遍歷，相關的字段把它合并在一起。可以簡單理解為本來都沒有合并，每一條從上往下為每一行，要是有相同的字段，就把單元格合并。（例如：倆個1，只取一個1）。
)
