:span-method=“objectSpanMethod” 为合并绑定的方法,关键性代码,此函数名字可以随意定义,这里定义的是objectSpanMethod
结构部分:
<div class="syllabus">
<p>课程表</p>
<el-table :data="tableData" **:span-method="objectSpanMethod"** border style="width:1150px">
<el-table-column prop="coTime" :resizable="false" label="日期" align="center"></el-table-column>
<el-table-column prop="One" :resizable="false" label="星期一" align="center"></el-table-column>
<el-table-column prop="Two" :resizable="false" label="星期二" align="center"></el-table-column>
<el-table-column prop="Three" :resizable="false" label="星期三" align="center"></el-table-column>
<el-table-column prop="Four" :resizable="false" label="星期四" align="center"></el-table-column>
<el-table-column prop="Five" :resizable="false" label="星期五" align="center"></el-table-column>
<!-- <el-table-column prop="coClassroom" label="教室" align="center"></el-table-column> -->
</el-table>
<!-- <span>备注:调课或停课或与课程无关通知信息。</span> -->
**加粗样式** </div>
处理好的后台的数据:(备注:让后台把课程按照时间排序后在返给你)
spanArr0: [], //存放每一行记录的合并数
spanArr1: [],
position0: 0, // spanArr0 的索引
position1: 0,
spanArr2: [],
spanArr3: [],
position2: 0,
position3: 0,
spanArr4: [],
spanArr5: [],
position4: 0,
position5: 0,
spanArr6: [],
spanArr7: [],
position6: 0,
position7: 0,
tableData: [
{
coTime: "10:00~12:00",
One: "课程:倾向行为训练 老师:诺诺 教室:C001",
Two: "",
Three: "",
Four: "",
Five: " ",
Six: "",
Seven: "",
coClassroom: "C001"
},
{
coTime: "10:00~12:00",
One: "",
Two: "",
Three: "课程:倾向行为训练 老师:诺诺 教室:C006",
Four: "",
Five: " ",
Six: "",
Seven: "",
coClassroom: "C006"
},
{
coTime: "10:00~12:00",
One: "",
Two: "课程:日常生活训练 老师:卡卡 教室:C009",
Three: "",
Four: "",
Five: "",
Six: "",
Seven: "",
coClassroom: "C009"
},
{
coTime: "10:00~12:00",
One: "",
Two: "",
Three: "课程:日常生活训练 老师:卡卡 教室:C002",
Four: "",
Five: "",
Six: "",
Seven: "",
coClassroom: "C002"
}
],
js逻辑部分:
处理数据的方法:
GetSpanArr() {
tableData.forEach((element, index) => {
//遍历数据 得到每项 和下标
if (index === 0) {
//如果是一条数据 直接不合并
this.spanArr1.push(1); //记录合并数
this.spanArr2.push(1); //记录合并数
this.spanArr3.push(1);
this.spanArr4.push(1);
this.spanArr0.push(1);
this.spanArr5.push(1);
this.spanArr6.push(1);
this.spanArr7.push(1);
this.position1 = 0; //记录spanArr1的索引值
this.position2 = 0; //记录spanArr2的索引值
this.position0 = 0; //记录spanArr1的索引值
this.position3 = 0; //记录spanArr2的索引值
this.position4 = 0; //记录spanArr1的索引值
this.position5 = 0; //记录spanArr2的索引值
this.position6 = 0; //记录spanArr1的索引值
this.position7 = 0; //记录spanArr2的索引值
} else {
if (element.coTime === tableData[index - 1].coTime) {
//非第一条数据 则判断是否与上一条相邻的数据值相等
this.spanArr0[this.position0] += 1; //相等则说明需要合并 rousoan:2 = 合并一行
this.spanArr0.push(0); //记录索引
} else {
this.spanArr0.push(1); //与上一单元格数据不相等 则不合并 rowspan:1 = 不合并
this.position0 = index; //记录索引
}
if (element.One === tableData[index - 1].One) {
//非第一条数据 则判断是否与上一条相邻的数据值相等
this.spanArr1[this.position1] += 1; //相等则说明需要合并 rousoan:2 = 合并一行
this.spanArr1.push(0); //记录索引
} else {
this.spanArr1.push(1); //与上一单元格数据不相等 则不合并 rowspan:1 = 不合并
this.position1 = index; //记录索引
}
if (element.Two === tableData[index - 1].Two) {
//非第一条数据 则判断是否与上一条相邻的数据值相等
this.spanArr2[this.position2] += 1; //相等则说明需要合并 rousoan:2 = 合并一行
this.spanArr2.push(0); //记录索引
} else {
this.spanArr2.push(1); //与上一单元格数据不相等 则不合并 rowspan:1 = 不合并
this.position2 = index; //记录索引
}
if (element.Three === tableData[index - 1].Three) {
//非第一条数据 则判断是否与上一条相邻的数据值相等
this.spanArr3[this.position3] += 1; //相等则说明需要合并 rousoan:2 = 合并一行
this.spanArr3.push(0); //记录索引
} else {
this.spanArr3.push(1); //与上一单元格数据不相等 则不合并 rowspan:1 = 不合并
this.position3 = index; //记录索引
}
if (element.Four === tableData[index - 1].Four) {
//非第一条数据 则判断是否与上一条相邻的数据值相等
this.spanArr4[this.position4] += 1; //相等则说明需要合并 rousoan:2 = 合并一行
this.spanArr4.push(0); //记录索引
} else {
this.spanArr4.push(1); //与上一单元格数据不相等 则不合并 rowspan:1 = 不合并
this.position4 = index; //记录索引
}
if (element.Five === tableData[index - 1].Five) {
//非第一条数据 则判断是否与上一条相邻的数据值相等
this.spanArr5[this.position5] += 1; //相等则说明需要合并 rousoan:2 = 合并一行
this.spanArr5.push(0); //记录索引
} else {
this.spanArr5.push(1); //与上一单元格数据不相等 则不合并 rowspan:1 = 不合并
this.position5 = index; //记录索引
}
if (element.Six === tableData[index - 1].Six) {
//非第一条数据 则判断是否与上一条相邻的数据值相等
this.spanArr6[this.position6] += 1; //相等则说明需要合并 rousoan:2 = 合并一行
this.spanArr6.push(0); //记录索引
} else {
this.spanArr6.push(1); //与上一单元格数据不相等 则不合并 rowspan:1 = 不合并
this.position6 = index; //记录索引
}
if (element.Seven === tableData[index - 1].Seven) {
//非第一条数据 则判断是否与上一条相邻的数据值相等
this.spanArr7[this.position7] += 1; //相等则说明需要合并 rousoan:2 = 合并一行
this.spanArr7.push(0); //记录索引
} else {
this.spanArr7.push(1); //与上一单元格数据不相等 则不合并 rowspan:1 = 不合并
this.position7 = index; //记录索引
}
}
});
},
关键性代码来了:
objectSpanMethodSmallClass({ row, column, rowIndex, columnIndex }) {
// 对第一列 进行合并
// row:传过来的当前一行数据,也就是每一个item
//rowIndex:每一行数据的的索引
//column:每一列数据,比如星期一下面的所有数据
//columnIndex :每一列数据的索引
// 当 当前行与上一行内容相同时 返回0 0 意味着合并
if (columnIndex === 0) {
if (
rowIndex > 0 &&
row.coTime === this.tableData[rowIndex - 1].coTime
) {
return {
rowspan: 0,
colspan: 0
};
} else {
let rows = 1;
// 查询相同的内容有多少行 进行合并(多行合并)
for (let i = rowIndex; i < this.tableData.length - 1; i++) {
if (row.coTime === this.tableData[i + 1].coTime) {
rows++;
}
}
// 返回相同内容的行数
return {
rowspan: rows,
colspan: 1
};
}
}
},
合并后效果图:
总结:vue 与elementUI结合使用,数据动态获取生成表格,根据自身业务需求来合并,次处业务需求是合并课程时间,主要是传过来的当前行与前一行的数据比较从而合并,若是要合并行,则要改变判断的条件为行即可,欢迎大家指教,一起探讨学习