<section class="main">
<el-table :data="tableData" border :span-method="objectSpanMethod">
<el-table-column align="center" class="big" :label="group.name+'周工作表('+start+' ~ '+end+')'">
<el-table-column prop="orgName" label="部门" width="150" />
<el-table-column prop="lastweekContent" label="上周工作情况">
<template slot-scope="scope">
<div><b>{{scope.row.workPlateName}}</b>:{{scope.row.lastweekContent}}</div>
</template>
</el-table-column>
<el-table-column prop="lastweekFinishTime" label="完成时限" width="130">
<template slot-scope="scope">
{{scope.row.lastweekFinishTime|ymd('{y}{m}{d}')}}
</template>
</el-table-column>
<el-table-column prop="status" label="完成情况" width="130">
<template slot-scope="scope">
<span v-if="scope.row.lastweekFinishTime">已完成</span>
</template>
</el-table-column>
<el-table-column prop="content" label="本周工作情况">
<template slot-scope="scope">
<div>{{scope.row.content}}</div>
</template>
</el-table-column>
<el-table-column prop="finishTime" label="完成时限" width="130">
<template slot-scope="scope">
{{scope.row.finishTime|ymd('{y}{m}{d}')}}
</template>
</el-table-column>
</el-table-column>
</el-table>
</section>
data:{
table:[
{
content: "rererrwrwer"
finishTime: null
lastweekContent: "1.31号工作 "
lastweekFinishTime: 1640880000000
orgName: "桂林赛普科技有限公司"
status: 1
workPlateName: "板块2"
}
]
}
method:{
mergeComon(id, rowIndex) { // 合并单元格
let idName = this.tableData[rowIndex][id]
if (rowIndex > 0) {
// eslint-disable-next-line eqeqeq
if (this.tableData[rowIndex][id] != this.tableData[rowIndex - 1][id]) {
let i = rowIndex; let num = 0
while (i < this.tableData.length) {
if (this.tableData[i][id] === idName) {
i++
num++
} else {
i = this.tableData.length
}
}
return {
rowspan: num,
colspan: 1
}
} else {
return {
rowspan: 0,
colspan: 1
}
}
} else {
let i = rowIndex; let num = 0
while (i < this.tableData.length) {
if (this.tableData[i][id] === idName) {
i++
num++
} else {
i = this.tableData.length
}
}
return {
rowspan: num,
colspan: 1
}
}
},
// 这个方法是 element-ui提供的单元格合并方法
objectSpanMethod({ row, column, rowIndex, columnIndex }) { // 合并单元格
if (columnIndex === 0) {
return this.mergeComon('orgName', rowIndex)
}
}
}
elementui动态table, 根据字段, 合并列
于 2021-12-26 22:17:01 首次发布