<template>
<div>
<el-table class="table-container" v-loading="loading2" :data="tableData2" :span-method="objectSpanMethod">
<el-table-column prop="name" label="考核项目" align="center">
</el-table-column>
<el-table-column prop="content" label="考核内容" align="center">
</el-table-column>
<el-table-column prop="standard" label="评分标准" align="left" width="740">
</el-table-column>
<el-table-column prop="score" label="分值" align="center" width="140">
</el-table-column>
</el-table>
</div>
</template>
<script>
export default {
name: 'component_name',
data () {
return {
loading2: false,
tableData2: [这里数据就不写了],
// 行合并数据和列合并数据
spanRowArrs: [],
spanColArrs: [],
pos: 0 //角标索引
};
},
methods: {
//data==>后端返回表格数据
//prop ==> 依据前端表格渲染的prop值,按顺序传入数组
//例如:prop=['name','score','standard','content']
// 1 处理纵向数据
getSpanArr(data,prop ) {
var spanArr = [];
for (var j=0 ;j<prop.length;j++) {
for (var i = 0; i < data.length; i++) {
if (i === 0) { //第一行数据不进行改变
spanArr.push(1);
this.pos = 0;
}else if(prop[j] === 'score' || prop[j] === 'standard' || prop[j] === 'content') { //当有字段不需要改变时,写入该判断
spanArr.push(1);
this.pos = 0;
}else {
//判断表格内相同prop时,数据是否与上行相等
if (data[i][prop[j]] === data[i - 1][prop[j]]) {
spanArr[this.pos] += 1;
spanArr.push(0);
} else {
spanArr.push(1);
this.pos = i;
}
}
}
//把生成的列数据插入spanRowArrs
this.spanRowArrs.push(spanArr)
spanArr = []
}
},
// 2. 处理横向数据
getRowSpanArr(data,prop) {
var spanArr = [];
for (var i = 0; i < data.length; i++) {
for (var j = 0; j < prop.length; j++) {
//判断表格数据是否与上列相等
if (data[i][prop[j]] === data[i][prop[j - 1]]) {
prop[this.pos] += 1;
prop.push(0);
} else {
prop.push(1);
this.pos = j;
}
}
this.spanColArrs.push(spanArr)
spanArr = []
}
},
// 3 返回合并数
objectSpanMethod({ row, column, rowIndex, columnIndex }) {
if (columnIndex >= 0) {
const _row = this.spanRowArrs[columnIndex][rowIndex];
const _col = this.spanColArrs[rowIndex][columnIndex];
return {
rowspan: _row,
colspan: _col
}
}
}
}
};
</script>
vue 表格动态合并行和列
于 2023-02-13 17:57:20 首次发布