需求
接口返回的数据,动态的合并相同数据的单元格。如图
原理
循环遍历接口请求的数据,记录相同数据重复的次数和位置,生成合并数据的数组,如下图:
根据下图生成要合并单元格的行rowspan和列colspan的数据,通过给table传入span-method方法可以实现合并行或列,其中方法的回调参数是一个对象,里面包含当前行row、当前列column、当前行号rowIndex、当前列号columnIndex四个属性
此图为渲染后,解析的图示,也就是通过修改行rowspan和列colspan的数据来实现合并
<template>
<div style="padding: 20px;">
<el-table :data="tableData" style="width: 100%;" :span-method="objectSpanMethod" border>
<!--遍历表-->
<!-- <el-table-column
:prop="item.prop"
:label="item.label"
v-for="(item, index) in tableHeader"
:key="index"
></el-table-column> -->
<el-table-column label="班级" align="center" prop="className" />
<el-table-column label="姓名" align="center" prop="name" />
<el-table-column label="年龄" align="center" prop="age" />
</el-table>
</div>
</template>
<script>
const datas = [{
className: '高一三班',
name: '张三',
age: 18
},
{
className: '高一三班',
name: '张三',
age: 19
},
{
className: '高一三班',
name: '王五',
age: 18
},
{
className: '高一七班',
name: '赵六',
age: 20
},
{
className: '高一七班',
name: '杜画',
age: 20
},
]
export default {
name: "MultiRowMergeTable",
data() {
this.spanMap = {};
this.mergedColumns = ["className", "name", "age"]
return {
tableHeader: [{
prop: "className",
label: "班级",
},
{
prop: "name",
label: "姓名",
},
{
prop: "age",
label: "年龄",
}
],
tableData: [],
}
},
created() {
this.getList(); //进入页面时调用getList()获取tableData[]数据
},
methods: {
//具体获取数据方法因需求而异
getList() {
// listExamineTableData(this.queryParams).then(response => {
// this.tableData = response.data;
// this.getSpanArr(this.tableData);
// });
this.tableData = datas;
// console.log(this.tableData)
this.getSpanArr(this.tableData);
},
getSpanArr(data) {
for (var i = 0; i < data.length; i++) {
if (i === 0) {
this.mergedColumns.forEach(column => {
this.spanMap[column] = {
spanArr: [1],
pos: 0,
// index:i
}
})
} else {
this.mergedColumns.forEach(column => {
if (data[i][column] === data[i - 1][column]) {
this.spanMap[column].spanArr[this.spanMap[column].pos] += 1;
this.spanMap[column].spanArr.push(0)
} else {
this.spanMap[column].spanArr.push(1);
this.spanMap[column].pos = i;
}
// this.spanMap[column].index=i
})
}
console.log(this.spanMap)
}
},
objectSpanMethod({
column,
rowIndex
}) {
if (this.spanMap[column.property]) {
const _row = this.spanMap[column.property].spanArr[rowIndex];
const _col = _row > 0 ? 1 : 0;
return {
rowspan: _row,
colspan: _col
}
}
}
}
}
</script>
<style>
</style>
另外,在eladmin框架中,crud的刷新的钩子中,实现合并的单元格不好用,表现为loading未置false,于是做了一个监听,当"crud.data"立即调用getSpanArr()方法,重构合并的数据,继而实现合并的方法
watch:{
"crud.data":{
immediate: true, // 立即执行
deep: true, // 深度监听复杂类型内变化
handler(newVal, oldVal) {
if(newVal){
this.getSpanArr(this.crud.data)
}
}
}
},