直接上代码
<template>
<section>
<section>
<el-table
:data="table"
:span-method="objectSpanMethod"
border
style="width: 100%">
<el-table-column
prop="checkRoom"
label="checkRoom"
width="180">
</el-table-column>
<el-table-column
prop="checkProject"
label="checkProject">
</el-table-column>
<el-table-column
prop="checkMoney"
label="checkMoney">
</el-table-column>
<el-table-column
prop="attention"
label="attention">
</el-table-column>
<el-table-column
prop="appointmentTime"
:formatter="dataCh"
label="appointmentTime">
</el-table-column>
</el-table>
</section>
</section>
</template>
<script>
export default {
name: 'meTest',
components: { },
data() {
return {
ruleForm : {},
msg : 'jiang',
curFilterChannel: null, // 当前筛选的channel
leftWidth: '300px',
treeIsCollapse: false,
curActiveNode: {
lfcode: 'dff'
},
table: [{
id: '1',
checkRoom: 'CTROOM',
checkProject: '300.22',
checkMoney: '300.22',
attention: '检查前空腹',
appointmentTime: ''
},{
id: '1',
checkRoom: 'CTROOM',
checkProject: '颈椎MRICT1',
checkMoney: '303.22',
attention: '检查前空腹',
appointmentTime: ''
},{
id: '1',
checkRoom: 'CTROOM',
checkProject: '颈椎MRICT22',
checkMoney: '340.22',
attention: '检查前空腹',
appointmentTime: '2019-5-29 10:30'
},{
id: '1',
checkRoom: 'DR',
checkProject: '鼻骨',
checkMoney: '500.22',
attention: '检查前',
appointmentTime: '2019-5-29 9:30'
}]
}
},
created() {
this.table = this.mergeTableRow(this.table, ['checkRoom', 'attention', 'appointmentTime'])
},
methods: {
objectSpanMethod({ row, column, rowIndex, columnIndex }) {
const span = column['property'] + '-span'
if(row[span]){
return row[span]
}
},
mergeTableRow(data, merge) {
if (!merge || merge.length === 0) {
return data
}
merge.forEach((m) => { // 'checkRoom'
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
}
}
}
</script>
<style lang="less">
</style>