需求原型：
代碼實現：
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',width:170,
renderHeader: (h, params) => {
return h('span', [
h('em', {
style:{
'color':'red'
},
}, '* '),
h('span', {
}, '考核內容')
]);
},
},
{key: 'indexName',width:170,
renderHeader: (h, params) => {
return h('span', [
h('em', {
style:{
'color':'red'
},
}, '* '),
h('span', {
}, '考評指標')
]);
},
},
{key: 'scoreRatio',width: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',width: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',width: 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 },