需求原型：
代码实现：
html部分：
<Row>
<Col span="24">
<Table id="tab" stripe border :columns="columns1" :data="formData.dataTable" :span-method="handleSpan"></Table>
</Col>
</Row>
import {MsgType, PublicType } from '../../libs/constants';
//data函数
data(){
return {
loadingShow:false, //页面加载loading效果
title:'考核指标设置', //表头名字
formData:{
dataTable:[]
}, //表单信息
columns1: [ //表头
{key: 'contentType',170,
renderHeader: (h, params) => {
return h('span', [
h('em', {
style:{
'color':'red'
},
}, '* '),
h('span', {
}, '考核内容')
]);
},
},
{key: 'indexName',170,
renderHeader: (h, params) => {
return h('span', [
h('em', {
style:{
'color':'red'
},
}, '* '),
h('span', {
}, '考评指标')
]);
},
},
{key: 'scoreRatio',100,
renderHeader: (h, params) => {
return h('span', [
h('em', {
style:{
'color':'red'
},
}, '* '),
h('span', {
}, '权重(%)')
]);
},
},
{key: 'evalPoint',
renderHeader: (h, params) => {
return h('span', [
h('em', {
style:{
'color':'red'
},
}, '* '),
h('span', {
}, '考评要点级标准')
]);
},
},
{title: '是否直接取值',key: 'isFetch',140,
render:(h,params)=>{
let isFetch = params.row.isFetch
if(isFetch == 'Y'){
return h('span',{
},'是');
}else if(isFetch == 'N'){
return h('span',{
},'否');
}
}
},
{title: '排序',key: 'showOrder', 80}
],
spanArr:[],// 合并单元格
}
},
methods中的方法：
//获取详情数据 getDetatil(id){ let data={ id:id }; this.loadingShow = true; this.$api.evalTargetSetting.getDetailData(data).then(res=>{ if(res.result == MsgType.SUCCESS){ let list = res.resultData || {}; this.formData = list; this.title = list.evalName; this.formData.createDate = this.$moment(list.createDate).format("YYYY-MM-DD HH:mm:ss"); this.formData.dataTable = list.evaluationIndexDetailList; this.spanArr = PublicType.getMergeNum(list.evaluationIndexDetailList,'contentType'); } this.loadingShow = false; }).catch(error=>{ this.loadingShow = false; }) }, //合并单元格 //row: 当前行 // column: 当前列 // rowIndex: 当前行索引 // columnIndex: 当前列索引 handleSpan({ row, column, rowIndex, columnIndex }){ if (columnIndex === 0) { // 二维数组存储的数据 取出 const _row = this.spanArr[rowIndex] const _col = _row > 0 ? 1 : 0 return { rowspan: _row, colspan: _col } //不可以return {rowspan：0， colspan: 0} 会造成数据不渲染， 也可以不写else，eslint过不了的话就返回false } else { return false } },
constants.js文件中的 getMergeNum方法：
/*合并单元格 data:数据列表 contentType:将要合并的对比字段 */ getMergeNum (data, contentType){ //页面展示的数据，不一定是全部的数据，所以每次都清空之前存储的 保证遍历的数据是最新的数据。以免造成数据渲染混乱 let spanArr = [] let pos = 0 //遍历数据 data.forEach((item, index) => { //判断是否是第一项 if (index === 0) { spanArr.push(1) pos = 0 } else { //不是第一项时，就根据标识去存储 if (data[index][contentType] === data[index-1][contentType]) { // 查找到符合条件的数据时每次要把之前存储的数据+1 spanArr[pos] += 1 spanArr.push(0) } else { // 没有符合的数据时，要记住当前的index spanArr.push(1) pos = index } } }) return spanArr },