<el-table
:data="tableData"
:cell-style="columnStyle"
:header-cell-style="tableHeaderColor"
:span-method="objectSpanMethod"
border
style="width: 100%; margin-top: 20px; line-height: 30px"
>
<el-table-column prop="id" label="时间" width="100">
</el-table-column>
<el-table-column prop="amount" label=""> </el-table-column>
<el-table-column prop="name" label="星期日"> </el-table-column>
<el-table-column prop="amount1" label="星期一"> </el-table-column>
<el-table-column prop="amount2" label="星期二"> </el-table-column>
<el-table-column prop="amount3" label="星期三"> </el-table-column>
<el-table-column prop="amount4" label="星期四"> </el-table-column>
<el-table-column prop="amount5" label="星期五"> </el-table-column>
<el-table-column prop="amount6" label="星期六"> </el-table-column>
</el-table>
tableData: [
{ id: "AM", name: "", amount: " First Section", amount1: "Mathematics", amount2: "English", amount3: "Mathematics", amount4: "Chinese", amount5: " Chinese", amount6: “”, }, { id: “”, name: “”, amount: “Second Section”, amount1: “English”, amount2: “Mathematics”, amount3: “Chinese”, amount4: “ English", amount5: "English", amount6: "", }, { id: "", name: "", amount: "Section 3", amount1: "Art", amount2: "Chinese", amount3: " English", amount4: "Mathematics", amount5: "Mathematics", amount6: "", },
{ id: "", name: "", amount: "Section 4", amount1: "Mathematics", amount2: "Biology", amount3: "Language", amount4: "Language", amount5: "Language", amount6 : "", }, { id: "afternoon", name: "", amount: "section 5", amount1: "history", amount2: "music", amount3: "mathematics", amount4: "language", amount5: “History”, amount6: “”, }, { id: “”, name: “”, amount: “ Sixth Section”, amount1: “Mathematics”, amount2: “History”, amount3: “Chinese”, amount4: "History", amount5: "Self-study", amount6: "", }, { id: "",
name: “”,
amount: “Section Seven”,
amount1: “Mathematics”,
amount2: “History”,
amount3: “Chinese”,
amount4: “Self-study”,
amount5: “Self-study”,
amount6: “”,
},
{ id: “”, name: “”, amount: “ section eight ”, amount1: “physics”, amount2: “physics”, amount3: “physics”, amount4: “self-study”, amount5: “mathematics”, amount6 : “”, }, ], methods: { arraySpanMethod({ row, column, rowIndex, columnIndex }) { // eslint-disable-line no-unused-vars if (rowIndex% 4 === 0) { if (columnIndex === 0) { return [4, 2]; } else if (columnIndex === 2) { return [0, 0];
}
}
},
objectSpanMethod({ row, column, rowIndex, columnIndex }) { // eslint-disable-line no-unused-vars if (columnIndex === 0) { if (rowIndex% 4 === 0) { return { rowspan: 4, colspan: 1, }; } else { return { rowspan: 1, colspan: 0, }; } } }, //row, data on each row //column, data on each column // rowIndex, the subscript of the number of rows starts from 0 //The subscript of the number of columns starts from 0
columnStyle({ row, column, rowIndex, columnIndex }) {
if (
(columnIndex == 2 && rowIndex == 2) ||
columnIndex == 3 ||
columnIndex == 4 ||
(columnIndex == 5 && rowIndex == 5) ||
columnIndex == 6 ||
columnIndex == 7 ||
columnIndex == 8
) {
if (
(columnIndex == 2 && rowIndex == 2) ||
columnIndex == 3 ||
(columnIndex == 4 && rowIndex == 4) ||
(columnIndex == 5 && rowIndex == 5 && columnIndex == 6) ||
(columnIndex == 7 && rowIndex == 7) ||
columnIndex == 8
) {
return "color:blue;cursor: pointer";
}
return "color:orange";
}
},
tableHeaderColor({ row, column, rowIndex, columnIndex }) {
if (rowIndex === 0 || rowIndex === 3) {
return "color: #000;font-weight: 800;";
}
},
},
}
。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。
<template>
<div class="table">
<el-table
:data="tableData"
:span-method="objectSpanMethod"
border
style="width: 100%; margin-top: 20px; line-height: 30px"
>
<el-table-column prop="id" label="时间" width="100"> </el-table-column>
<el-table-column prop="amount" label=""> </el-table-column>
<el-table-column prop="name" label="星期日"> </el-table-column>
<el-table-column prop="amount1" label="星期一"> </el-table-column>
<el-table-column prop="amount2" label="星期二"> </el-table-column>
<el-table-column prop="amount3" label="星期三"> </el-table-column>
<el-table-column prop="amount4" label="星期四"> </el-table-column>
<el-table-column prop="amount5" label="星期五"> </el-table-column>
<el-table-column prop="amount6" label="星期六"> </el-table-column>
</el-table>
</div>
</template>
<script>
export default {
data() {
return {
tableData: [
{
id: "上午",
name: "",
amount: "第一节",
amount1: "数学",
amount2: "英语",
amount3: "数学",
amount4: "语文",
amount5: "语文",
amount6: "",
},
{
id: "",
name: "",
amount: "第二节",
amount1: "英语",
amount2: "数学",
amount3: "语文",
amount4: "英语",
amount5: "英语",
amount6: "",
},
{
id: "",
name: "",
amount: "第三节",
amount1: "美术",
amount2: "语文",
amount3: "英语",
amount4: "数学",
amount5: "数学",
amount6: "",
},
{
id: "",
name: "",
amount: "第四节",
amount1: "数学",
amount2: "生物",
amount3: "语文",
amount4: "语文",
amount5: "语文",
amount6: "",
},
{
id: "下午",
name: "",
amount: "第五节",
amount1: "历史",
amount2: "音乐",
amount3: "数学",
amount4: "语文",
amount5: "历史",
amount6: "",
},
{
id: "",
name: "",
amount: "第六节",
amount1: "数学",
amount2: "历史",
amount3: "语文",
amount4: "历史",
amount5: "自习",
amount6: "",
},
{
id: "",
name: "",
amount: "第七节",
amount1: "数学",
amount2: "历史",
amount3: "语文",
amount4: "自习",
amount5: "自习",
amount6: "",
},
{
id: "",
name: "",
amount: "第八节",
amount1: "物理",
amount2: "物理",
amount3: "物理",
amount4: "自习",
amount5: "数学",
amount6: "",
},
],
};
},
methods: {
arraySpanMethod({ row, column, rowIndex, columnIndex }) { // eslint-disable-line no-unused-vars
if (rowIndex % 4 === 0) {
if (columnIndex === 0) {
return [4, 2];
} else if (columnIndex === 2) {
return [0, 0];
}
}
},
objectSpanMethod({ row, column, rowIndex, columnIndex }) { // eslint-disable-line no-unused-vars
if (columnIndex === 0) {
if (rowIndex % 4 === 0) {
return {
rowspan: 4,
colspan: 1,
};
} else {
return {
rowspan: 1,
colspan: 0,
};
}
}
},
},
};
</script>
<style scoped>
</style>
