<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<div id="app">
<el-table style="421px" :data="historyData" :span-method="objectSpanMethod" :border="true">
<el-table-column prop="checkRoom" label="科室" align="center" width="140">
</el-table-column>
<el-table-column prop="checkProject" label="检查项目" align="center" width="140">
</el-table-column>
<el-table-column prop="attention" label="注意事项" align="center" width="140">
</el-table-column>
</el-table>
</div>
<body>
<script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>
new Vue({
el: '#app',
data: function () {
return {
historyData: [],
}
},
mounted() {
let dataArr = [{
checkRoom: 'CTROOM',
checkProject: '颈椎MRICT',
attention: '检查前空腹',
}, {
checkRoom: 'CTROOM',
checkProject: '颈椎MRICT1',
attention: '检查前空腹',
}, {
checkRoom: 'CTROOM',
checkProject: '颈椎MRICT1',
attention: '检查前空腹',
}, {
checkRoom: 'CTROOM',
checkProject: '颈椎MRICT1',
attention: '检查前空腹',
}, {
checkRoom: 'CTROOM',
checkProject: '颈椎MRICT3',
attention: '检查前空腹',
}, {
checkRoom: 'DR',
checkProject: '鼻骨',
attention: '检查前空腹',
}, {
checkRoom: 'DR',
checkProject: '鼻骨',
attention: '检查前空腹',
}, {
checkRoom: 'DR',
checkProject: '头骨',
attention: '检查前空腹',
}];
let dataSolve = this.mergeTableRow(dataArr, ["checkRoom", "checkProject"])
this.historyData = dataArr;
},
methods: {
// 合并表格函数
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;
},
objectSpanMethod({ row, column, rowIndex, columnIndex }) {
const span = column["property"] + "-span";
if (row[span]) {
return row[span];
}
},
}
})
</script>
</body>
</html>