elementUI的表格单元格合并
程序员文章站
2022-06-08 15:55:04
...
在Vue项目中使用elementui的el-table列表,从后台请求的列表动态数据其中有版本和任务两个字段(列)都会有重复,需要合并行单元格
查看elementui文档,可以给 el-table 传入一个 span-method 方法,接收一个参数{ row, column, rowIndex, columnIndex },四个属性分别为当前行数据,当前列数据,当前行号,当前列号。方法返回一个数组 [rowspan, colspan] 或者 对象 { rowspan: 0, colspan: 2 },表示合并的行和列
上代码
el-table 中的代码
<el-table
v-loading="loading"
:data="tableData"
:span-method="arraySpanMethod"
v-auto-height:maxHeight="-10"
:max-height="maxHeight"
border
>
<el-table-column
prop="versionName"
label="版本"
align="center"
/>
<el-table-column
prop="taskName"
label="任务名称"
align="center"
/>
<el-table-column
prop="cycle"
label="轮次"
align="center"
/>
<el-table-column
prop="caseTotal"
label="Case 总数"
align="center"
/>
<el-table-column
prop="successNum"
label="成功数"
align="center"
/>
<el-table-column
prop="failNum"
label="失败数"
align="center"
/>
</el-table>
js 代码
<script>
export default {
name: 'TestReport',
data() {
return {
loading: true,
tableData: [],
// 用于存储列表中需要合并的单元格和合并数
versionSpanArr: [],
taskSpanArr: [],
}
},
created() {
this.getTestReport()
},
methods: {
// 获取表格数据
async getTestReport() {
this.loading = true
try {
const { data } = await getReport()
this.tableData = data.casesResult
// 从后台获取到列表数据之后,执行getSpanNum,要在DOM渲染之前即arraySpanMethod调用之前完成调用
this.getSpanNum('versionName', 'versionSpanArr')
this.getSpanNum('taskName', 'taskSpanArr')
} catch (error) {
console.log(error)
} finally {
this.loading = false
}
},
// 重点:首先获取需要合并的单元格以及合并行数
getSpanNum(spanName, spanArrName) {
// 由于我有两列都需要合并,spanName, spanArrName 两个参数只是为了方便复用
// spanName是需要合并的列的字段键名,spanArrName是接收需要合并的列的数据,初始化在data中
this[spanArrName] = []
let contantDot = 0
this.tableData.forEach((item, index) => {
if (index === 0) {
// 第一列
this[spanArrName].push(1)
} else {
// 判断与上一行的值是否一样
if (item[spanName] === this.tableData[index - 1][spanName]) {
this[spanArrName][contantDot] += 1
this[spanArrName].push(0)
} else {
// contantDot记录当前需要合并的行
contantDot = index
this[spanArrName].push(1)
}
}
})
},
// 表格单元格合并绑定的函数
arraySpanMethod({ row, column, rowIndex, columnIndex }) {
if (columnIndex === 0) {
// 第一列,版本,与上一行值相同的this.versionSpanArr[rowIndex]都为0
if (this.versionSpanArr[rowIndex]) {
return {
// rowspan 合并的行数
rowspan: this.versionSpanArr[rowIndex],
colspan: 1
}
} else {
return {
rowspan: 0,
colspan: 0
}
}
} else if (columnIndex === 1) {
// 第二列,任务
if (this.taskSpanArr[rowIndex]) {
return {
rowspan: this.taskSpanArr[rowIndex],
colspan: 1
}
} else {
return {
rowspan: 0,
colspan: 0
}
}
}
}
}
</script>