VUE + element 实现表格----（纵向，横向）合并，带JSON的demo，复制就可用
"stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
"app">
<el-form :model="dynamicValidateForm" ref="dynamicValidateForm" class="dynamic-table" label-width="0">
<el-table
:data="dynamicValidateForm.domains"
:span-method="objectSpanMethod"
stripe
border
fit
size="mini"
>
"主体" prop="NAME" width="60" align="center">
"一级指标" prop="SCORE" width="80" align="center">
"二级指标" prop="CONTENT" width="80" align="center">
"Q1" align="center">
"Jan" label="Jan" align="center" width="60">
"Feb" label="Feb" align="center" width="60">
"Mar" label="Mar" align="center" width="60">
"Q2" align="center">
"Apr" label="Apr" align="center" width="60">
"May" label="May" align="center" width="60">
"Jun" label="Jun" align="center" width="60">
"Q3" align="center">
"Jul" label="Jul" align="center" width="60">
"Aug" label="Aug" align="center" width="60">
"Sep" label="Sep" align="center" width="60">
"Q4" align="center">
"Oct" label="Oct" align="center" width="60">
"Nov" label="Nov" align="center" width="60">
"Dec" label="Dec" align="center" width="60">
"nian" label="年度" align="center">
"zong" :label="'1-N月\n合计'" align="center" width="60">
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>
new Vue({
el: '#app',
data() {
return {
list: [],
listLoading: true,
dynamicValidateForm: {
domains: []
},
spanArr: [], // 一个空的数组，用于存放每一行记录的合并数
pos: 0, // spanArr 的索引
contentSpanArr: [],
position: 0,
tableData: [{
index: 7,
NAME: '张三',
SCORE: '期末在职',
CONTENT: '实际达成',
Jan:'1',
Feb:'2',
Mar:'3',
Apr:'4',
May:'5',
Jun:'6',
Jul:'7',
Aug:'8',
Sep:'9',
Oct:'10',
Nov:'11',
Dec:'12',
nian:'2011',
zong:'2000'
},
{
index: 8,
NAME: '张三',
SCORE: '期末在职',
CONTENT: '年初预计',
STANDARD: '3.1231232',
Jan:'1',
Feb:'2',
Mar:'3',
Apr:'4',
May:'5',
Jun:'6',
Jul:'7',
Aug:'8',
Sep:'9',
Oct:'10',
Nov:'11',
Dec:'12',
nian:'2011',
zong:'2000'
}, {
index: 9,
NAME: '张三',
SCORE: '期末在职',
CONTENT: '最新预计',
STANDARD: '23eadas.2',
Jan:'1',
Feb:'2',
Mar:'3',
Apr:'4',
May:'5',
Jun:'6',
Jul:'7',
Aug:'8',
Sep:'9',
Oct:'10',
Nov:'11',
Dec:'12',
nian:'2011',
zong:'2000'
},{
index: 20,
NAME: '张三',
SCORE: '期末在职',
CONTENT: '上年同期',
STANDARD: '23eadas.2',
Jan:'1',
Feb:'2',
Mar:'3',
Apr:'4',
May:'5',
Jun:'6',
Jul:'7',
Aug:'8',
Sep:'9',
Oct:'10',
Nov:'11',
Dec:'12',
nian:'2011',
zong:'2000' },
{
index: 16,
NAME: '张三',
SCORE: '净值',
CONTENT: '实际达成',
STANDARD: '3sfsf.2',
Jan:'1',
Feb:'2',
Mar:'3',
Apr:'4',
May:'5',
Jun:'6',
Jul:'7',
Aug:'8',
Sep:'9',
Oct:'10',
Nov:'11',
Dec:'12',
nian:'2011',
zong:'2000'
},
{
index: 15,
NAME: '张三',
SCORE: '净值',
CONTENT: '年初预计',
STANDARD: '3sfsf.2',
Jan:'1',
Feb:'2',
Mar:'3',
Apr:'4',
May:'5',
Jun:'6',
Jul:'7',
Aug:'8',
Sep:'9',
Oct:'10',
Nov:'11',
Dec:'12',
nian:'2011',
zong:'2000'
},
{
index: 11,
NAME: '张三',
SCORE: '净值',
CONTENT: '最新预计',
STANDARD: '3sfsf.2',
Jan:'1',
Feb:'2',
Mar:'3',
Apr:'4',
May:'5',
Jun:'6',
Jul:'7',
Aug:'8',
Sep:'9',
Oct:'10',
Nov:'11',
Dec:'12',
nian:'2011',
zong:'2000'
}, {
index: 12,
NAME: '张三',
SCORE: '净值',
CONTENT: '上年同期',
STANDARD: '1111',
Jan:'1',
Feb:'2',
Mar:'3',
Apr:'4',
May:'5',
Jun:'6',
Jul:'7',
Aug:'8',
Sep:'9',
Oct:'10',
Nov:'11',
Dec:'12',
nian:'2011',
zong:'2000'
},
{
index: 17,
NAME: '张三',
SCORE: '入职',
CONTENT: '实际达成',
Jan:'1',
Feb:'2',
Mar:'3',
Apr:'4',
May:'5',
Jun:'6',
Jul:'7',
Aug:'8',
Sep:'9',
Oct:'10',
Nov:'11',
Dec:'12',
nian:'2011',
zong:'2000'
},{
index: 47,
NAME: '张三',
SCORE: '入职',
CONTENT: '年初达成',
Jan:'1',
Feb:'2',
Mar:'3',
Apr:'4',
May:'5',
Jun:'6',
Jul:'7',
Aug:'8',
Sep:'9',
Oct:'10',
Nov:'11',
Dec:'12',
nian:'2011',
zong:'2000'
},
{
index: 27,
NAME: '李四',
SCORE: '期末在职',
CONTENT: '年初达成',
Jan:'1',
Feb:'2',
Mar:'3',
Apr:'4',
May:'5',
Jun:'6',
Jul:'7',
Aug:'8',
Sep:'9',
Oct:'10',
Nov:'11',
Dec:'12',
nian:'2011',
zong:'2000'
},
{
index: 28,
NAME: '李四',
SCORE: '期末在职',
CONTENT: '年初预计',
Jan:'1',
Feb:'2',
Mar:'3',
Apr:'4',
May:'5',
Jun:'6',
Jul:'7',
Aug:'8',
Sep:'9',
Oct:'10',
Nov:'11',
Dec:'12',
nian:'2011',
zong:'2000'
},
{
index: 29,
NAME: '李四',
SCORE: '期末在职',
CONTENT: '最新预计',
Jan:'1',
Feb:'2',
Mar:'3',
Apr:'4',
May:'5',
Jun:'6',
Jul:'7',
Aug:'8',
Sep:'9',
Oct:'10',
Nov:'11',
Dec:'12',
nian:'2011',
zong:'2000'
},
]
};
},
created() {
this.getList();
},
methods: {
// 合并单元格
objectSpanMethod({row,column,rowIndex,columnIndex}) {
if (columnIndex === 0) {
const _row = this.spanArr[rowIndex];
const _col = _row > 0 ? 1 : 0;
return {
rowspan: _row,
colspan: _col
};
} else if (columnIndex === 1) {
const _row = this.contentSpanArr[rowIndex];
const _col = _row > 0 ? 1 : 0;
return {
rowspan: _row,
colspan: _col
};
}
},
// 获取列表数据
getList() {
this.dynamicValidateForm.domains = this.tableData || [];
// 设定一个数组spanArr/contentSpanArr来存放要合并的格数，同时还要设定一个变量pos/position来记录
this.spanArr = [];
this.contentSpanArr = [];
for (var i = 0; i < this.tableData.length; i++) {
if (i === 0) {
this.spanArr.push(1);
this.pos = 0;
this.contentSpanArr.push(1);
this.position = 0;
} else {
// 判断当前元素与上一个元素是否相同(第1和第2列)
if (this.tableData[i].NAME === this.tableData[i - 1].NAME) {
this.spanArr[this.pos] += 1;
this.spanArr.push(0);
} else {
this.spanArr.push(1);
this.pos = i;
}
// 判断当前元素与上一个元素是否相同(第3列)
if (this.tableData[i].SCORE === this.tableData[i - 1].SCORE) {
this.contentSpanArr[this.position] += 1;
this.contentSpanArr.push(0);
} else {
this.contentSpanArr.push(1);
this.position = i;
}
}
}
}
}
});
</script>效果图