<template>
<div>
<table width="100%" cellspan="0">
<tr v-for="(itemTr, indexTr) in tableData" :key="indexTr">
<td :rowspan="itemTd.rowspan" :colspan="itemTd.colspan" v-for="(itemTd, indexTd) in itemTr" :key="indexTd">{{ itemTd.name }}</td>
</tr>
</table>
</div>
</template>
<script>
export default {
name: "HelloWorld",
data() {
return {
tableData: [
["周一", "周一", "周一", "周四", "周五", "周六"],
["語文", "數學", "英語", "歷史", "物理", "化學"],
["語文", "英語", "數學", "物理", "歷史", "體育"],
["語文", "英語", "物理", "數學", "體育", "歷史"],
["數學", "語文", "化學", "物理", "歷史", "體育"],
["數學", "語文", "化學", "物理", "體育", "歷史"],
]
};
},
created() {
this.tableData = this.rowspanData(this.tableData)
},
methods: {
//合并行
rowspanData(data) {
let rowspanData = []
first: for (let i = 0; i < data.length; i++) {
let rowsArray = [] //一行
second: for (let j = 0; j < data[i].length; j++) {
//一列
let obj = {
name: data[i][j],
rowspan: 1, //行
colspan: 1 //列
}
if (i === 0) {
rowsArray.push(obj)
}
if (i > 0) {
if (data[i][j] === data[i - 1][j]) {
//?只取了一次值
console.log(data[i][j]);
console.log(data[i - 1][j]);
rowspanData[i - 1][j].rowspan++
} else {
rowsArray.push(obj)
}
}
}
rowspanData.push(rowsArray)
}
//console.log(rowspanData);
return rowspanData
},
//合并列
colspanData(data) {
let colspanData = []
first: for (let i = 0; i < data.length; i++) {
let rowsArray = [] //一行
second: for (let j = 0; j < data[i].length; j++) {
//一列
let obj = {
name: data[i][j],
colspan: 1, //列
rowspan: 1 //行
}
if (rowsArray.length > 0) {
colspanData: for (let k = 0; k < rowsArray.length; k++) {
if (data[i][j] === rowsArray[k].name) {
rowsArray[k].colspan++;
continue second
}
}
}
rowsArray.push(obj)
}
colspanData.push(rowsArray)
}
return colspanData
}
}
};
</script>
<style scoped>
table {
border: 1px solid #666;
}
table td {
border-bottom: 1px solid #666;
border-right: 1px solid #666;
}
</style>
上面是vue的代碼，想把陣列處理成 下面的陣列格式，下面的資料只是舉例，
tableData: [{
name: "周一",
colspan: 3, //列
rowspan: 1 //行
},
{
name: "語文",
colspan: 1, //列
rowspan: 3 //行
}
]最后的資料可以用vue的v-for回圈出來，請大家幫忙看看。
<table width="100%" cellspan="0">
<tr v-for="(itemTr, indexTr) in tableData" :key="indexTr">
<td :rowspan="itemTd.rowspan" :colspan="itemTd.colspan" v-for="(itemTd, indexTd) in itemTr" :key="indexTd">{{ itemTd.name }}</td>
</tr>
</table>
uj5u.com熱心網友回復：
自己做了幾天，還是沒做出來。公司專案，求救csdn了轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/270019.html
標籤：JavaScript
上一篇：AJAX獲取不到值