一个班级下面可以有多个试卷。这时候我们要根据班级的id来确定合并的行数。班级id一样的要合并。
tableData: [ {
classname: '2018年暑假班一年级语文小班兴趣',
clsid: '123',
title: '2020/06/18 20:21:12 测试 (4)题',
}, {
classname: '2018年暑假班一年级语文小班兴趣',
clsid: '123',
title: '2020/06/18 20:21:12 测试 (4)题',
}, {
classname: '2017年暑假班一年级语文小班兴趣',
clsid: '1234',
title: ' 语文期末试卷',
}, {
classname: '2019年暑假班一年级语文小班兴趣',
clsid: '12345',
title: '测试卷',
}],
从上面的数据我们可以看出第一行和第二行都是2018年暑假班一年级语文小班兴趣的要合并。
这里我们可以给每个数据增加一个属性.代表当前行和列合并的数。然后在循环表格的时候可以参照这个值来。
clsid-span={
rowspan:'',
colspan:''
}
下面这个函数data代表table表格。merge代表要根据那些字段合并。merge是个数组可以有多个要合并的参数。
mergeTableRow(data, merge) {
if (!merge || merge.length === 0) {
return data
}
merge.forEach((m) => {
const mList = {}
data = data.map((v, index) => {
const rowVal = v[m]
if (mList[rowVal] && mList[rowVal].newIndex === index) {
mList[rowVal]['num']++
mList[rowVal]['newIndex']++
data[mList[rowVal]['index']][m + '-span'].rowspan++
v[m + '-span'] = {
rowspan: 0,
colspan: 0
}
} else {
mList[rowVal] = { num: 1, index: index, newIndex: index + 1 }
v[m + '-span'] = {
rowspan: 1,
colspan: 1
}
}
return v
})
})
return data
}
我们要合并的是根据clsid来的。所以我们在mounted的时候要调用他.
mounted() {
this.table=this.mergeTableRow(this.table,['classname','clsid']);
}
根据上面的调用我们可以看到this.table现在的值是。这样的。知道了每行的数据的合并的行和列。
<el-table :data="Lessontable" :span-method="arraySpanMethod">
<el-table-column prop="classname" label="班级名称">
</el-table-column>
<el-table-column prop="title" label="试卷" width="260px">
</el-table-column>
</el-table>
我们根据他的classname-span和clsid-span就可以知道合并的行列数。
arraySpanMethod({ row, column, rowIndex, columnIndex }) {
const span = column['property'] + '-span'
if(row[span]){
return row[span]
}
},