el-table合并单元格效果：
加这个方法：
:span-method="objectSpanMethod"
<el-table
:data="tableData"
id="gy-table" //监听用，修改合计行的字体
:span-method="objectSpanMethod"
height="780"
:stripe="true"
show-summary
:summary-method="getSummaries"
border
stripe
highlight-current-row
style="width: 100%;max-height:780px;margin-bottom: 20px;margin-top: 10px;overflow: auto;cursor:pointer">
<el-table-column
type="index"
label="序号"
width="58"
align="center"
></el-table-column>
<el-table-column prop="name" label="姓名">
<template slot-scope="scope">
<span>${ scope.row.name }</span>
</template>
</el-table-column>
<el-table-column prop="dep_name" label="部门">
<template slot-scope="scope">
<span v-if="scope.row.dep_id == '9999999999999'" style="font-weight: bold">${ scope.row.dep_name }</span>
<span v-else>${ scope.row.dep_name }</span>
</template>
</el-table-column>
<el-table-column prop="properties" label="样品性质">
<template slot-scope="scope">
<span v-if="scope.row.dep_id == '9999999999999'" style="font-weight: bold">${ scope.row.properties }</span>
<span v-else>${ scope.row.properties }</span>
</template>
</el-table-column>
<el-table-column prop="qa_qty" label="工艺分析数量">
<template slot-scope="scope">
<span v-if="scope.row.dep_id == '9999999999999' && scope.row.qa_qty != 0" style="font-weight: bold">${ scope.row.qa_qty }</span>
<span v-else-if="scope.row.qa_qty != 0">${ scope.row.qa_qty}</span>
</template>
</el-table-column>
<el-table-column prop="review_qty" label="评审数量">
<template slot-scope="scope">
<span v-if="scope.row.dep_id == '9999999999999' && scope.row.review_qty != 0" style="font-weight: bold">${ scope.row.review_qty }</span>
<span v-else-if="scope.row.review_qty != 0">${ scope.row.review_qty}</span>
</template>
</el-table-column>
</el-table>var app = new Vue({
el: '#app',
delimiters: ['${', '}'],
data() {
return {
//姓名
spanArr_name: [],
posName: null,
//部门
spanArr_dep_name: [],
posdepName: null,
};
},
methods: {
objectSpanMethod({ row, column, rowIndex, columnIndex }) {
let self = this;
//姓名列
//columnIndex 给第二列做单元格合并。0是第一列，1是第二列，2是第三列。
if (columnIndex === 1) {
const rowCell = self.spanArr_name[rowIndex];
if (rowCell > 0) {
const colCell = 1;
return {
rowspan: rowCell,
colspan: colCell,
};
} else {
// 清除原有的单元格，必须要加，否则就会出现单元格会被横着挤到后面了！！！
// 本例中数据是写死的不会出现，数据若是动态后端获取的，就会出现了！！！
return {
rowspan: 0,
colspan: 0,
};
}
}
//部门列
// columnIndex 给第二列做单元格合并。0是第一列，1是第二列，2是第三列。
if (columnIndex === 2) {
console.log("单元格数组，若下一项为0，则代表合并上一项", self.spanArr_dep_name);
const rowCell_dep = self.spanArr_dep_name[rowIndex];
if (rowCell_dep > 0) {
const colCell_dep = 1;
console.log(`动态竖向合并单元格, 第${colCell_dep}列，竖向合并${rowCell_dep}个单元格 `);
return {
rowspan: rowCell_dep,
colspan: colCell_dep,
};
} else {
// 清除原有的单元格，必须要加，否则就会出现单元格会被横着挤到后面了！！！
// 本例中数据是写死的不会出现，数据若是动态后端获取的，就会出现了！！！
return {
rowspan: 0,
colspan: 0,
};
}
}
//继续列，就继续if() else 你妈的
},
//获取合并配置明细
getSpanArr(data) {
console.log(data)
let self = this;
self.spanArr_name = [];
self.posName = 0; // 初始计数为0
self.spanArr_dep_name = [];
self.posdepName = 0; // 初始计数为0
// 循环遍历表体数据
for (let i = 0; i < data.length; i++) {
if (i == 0) {
// 先设置第一项
self.spanArr_name.push(1); // 初为1，若下一项和此项相同，就往spanArr_name数组中追加0
self.posName = 0; // 初始计数为0
self.spanArr_dep_name.push(1); // 初为1，若下一项和此项相同，就往spanArr_dep_name数组中追加0
self.posdepName = 0; // 初始计数为0
}
else {
// 判断当前项与上项的设备类别是否相同，因为是合并这一列的单元格
//姓名列
if (data[i].name == data[i - 1].name) {
// 如果相等
self.spanArr_name[self.posName] += 1; // 增加计数
self.spanArr_name.push(0); // 相等就往spanArrp_name数组中追加0
}
else {
self.spanArr_name.push(1); // 不等就往spanArr_name数组中追加1
self.posName = i; // 将索引赋值为计数
console.log("索引", i, self.posName);
}
//部门列
if(data[i].dep_name == data[i - 1].dep_name){
// 如果相等
self.spanArr_dep_name[self.posdepName] += 1; // 增加计数
self.spanArr_dep_name.push(0); // 相等就往spanArr_dep_name数组中追加0
console.log("索引", i, self.posdepName);
}
else {
self.spanArr_dep_name.push(1); // 不等就往spanArr_dep_name数组中追加1
self.posdepName = i; // 将索引赋值为计数
console.log("索引", i, self.posdepName);
}
//继续列，就继续if() else, 但是要重新声明 数据列添加的新数组 你妈的
}
}
},
//合计行
getSummaries(param) {
const { columns, data } = param;
const sums = [];
columns.forEach((column, index) => {
if (index === 0) {
sums[index] = '总 计';
return;
}
const values = data.map(item => Number(item[column.property]));
//指定列名是qa_qty 或 review_qty的列，其他不统计
if (!values.every(value => isNaN(value)) && (column.property === 'qa_qty' || column.property ==='review_qty')) {
sums[index] = values.reduce((prev, curr) => {
const value = Number(curr);
if (!isNaN(value)) {
return prev + curr;
} else {
return prev/2;
}
}, 0);
let i_sum = sums[index]/2;
sums[index] = i_sum;
} else {
sums[index] = null;
}
});
return sums;
}
},
//修改合计行的 字体 样式
watch: {
tableData: {
async handler() {
await this.$nextTick(()=>{
const tds = document.querySelectorAll('#gy-table .el-table__footer-wrapper tr>td');
// tds[1].style.textAlign = 'center';
tds[1].style.fontWeight = 'bold';
tds[1].style.fontSize = '14';
tds[4].style.fontWeight = 'bold';
tds[4].style.fontSize = '14';
tds[5].style.fontWeight = 'bold';
tds[5].style.fontSize = '14';
});
}
},
},
mounted() {
// ...
},
});
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
