<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: “上午”,
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,
};
}
}
},
//row, 每一行上的数据
//column, 每一列上的数据
//rowIndex, 行数的下标从0开始
//columnIndex 列数下标从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>