element-ui中Table表格如何合并单元格（合并多列、前几列）
参考来之https://blog.csdn.net/weixin_38516688/article/details/86021359主要代码merageInit() { // 在下文的时候会用到，对数据进行初始化是很有必要的this.paragraph_merageArr = [];this.paragraph_meragePos = 0;this.project_merageArr = [];t
·
参考来之https://blog.csdn.net/weixin_38516688/article/details/86021359
主要代码
merageInit() { // 在下文的时候会用到，对数据进行初始化是很有必要的
this.paragraph_merageArr = [];
this.paragraph_meragePos = 0;
this.project_merageArr = [];
this.project_meragePos = 0;
this.branch_merageArr = [];
this.branch_meragePos = 0;
},
// 合并多列专用
merage() {
this.merageInit(); // 前文的初始化数据函数
for (let i = 0; i < this.tableData.length; i++) {
if (i === 0) {
// 第一行必须存在
this.paragraph_merageArr.push(1);
this.paragraph_meragePos = 0;
this.project_merageArr.push(1);
this.project_meragePos = 0;
this.branch_merageArr.push(1);
this.branch_meragePos = 0;
} else {
// 判断当前元素与上一个元素是否相同,eg：this.paragraph_meragePos 是 this.typeNameArr序号
// 第一列
if (this.tableData[i].paragraph === this.tableData[i - 1].paragraph) {
this.paragraph_merageArr[this.paragraph_meragePos] += 1;
this.paragraph_merageArr.push(0);
} else {
this.paragraph_merageArr.push(1);
this.paragraph_meragePos = i;
}
// 第二列
if (this.tableData[i].project === this.tableData[i - 1].project && this.tableData[i].paragraph === this.tableData[i - 1].paragraph) {
this.project_merageArr[this.project_meragePos] += 1;
this.project_merageArr.push(0);
} else {
this.project_merageArr.push(1);
this.project_meragePos = i;
}
// 第三列
if (this.tableData[i].branch === this.tableData[i - 1].branch && this.tableData[i].project === this.tableData[i - 1].project && this.tableData[i].paragraph === this.tableData[i - 1].paragraph) {
this.branch_merageArr[this.branch_meragePos] += 1;
this.branch_merageArr.push(0);
} else {
this.branch_merageArr.push(1);
this.branch_meragePos = i;
}
}
}
},
// 合并专用
objectSpanMethod({ row, column, rowIndex, columnIndex }) {
if (columnIndex === 0) {
// 第一列的合并方法
const row1 = this.paragraph_merageArr[rowIndex];
const col1 = row1 > 0 ? 1 : 0; // 如果被合并了row = 0; 则他这个列需要取消
return {
rowspan: row1,
colspan: col1,
};
} else if (columnIndex === 1) {
// 第二列的合并方法
const row2 = this.project_merageArr[rowIndex];
const col2 = row2 > 0 ? 1 : 0; // 如果被合并了row = 0; 则他这个列需要取消
return {
rowspan: row2,
colspan: col2,
};
} else if (columnIndex === 2) {
// 第三列的合并方法
const row3 = this.branch_merageArr[rowIndex];
const col3 = row3 > 0 ? 1 : 0; // 如果被合并了row = 0; 则他这个列需要取消
return {
rowspan: row3,
colspan: col3,
};
}
},
完整代码 vue单文件
summary-report.vue
<!-- 检测汇报->汇总 -->
<template lang="pug">
.summary1
.title_exportBox(style="display: flex")
.title 汇总表
.boxTable
el-table(
:data="tableData",
border,
height="calc(100vh - 285px)",
:header-cell-style="{ background: '#fff', color: '#555555', fontSize: '16px' }",
:span-method="objectSpanMethod"
v-loading="tableLoading"
)
el-table-column(v-if="paragraph_show === '1'" prop="paragraph", label="标段", align="center")
el-table-column(prop="project", label="单位工程", align="center")
el-table-column(prop="branch", label="分部工程", align="center")
el-table-column(prop="name", label="检测项目", align="center")
el-table-column(prop="constructionNum", label="施工完成数量", align="center")
el-table-column(prop="inspectionNum", label="报检数量", align="center")
</template>
<script>
import { mapGetters } from "vuex";
export default {
name: "summary-report",
components: {},
props: {
},
data() {
return {
exportParams: {},
tableLoading: false,
pos: 0,
spanArr: [],
page_export:0,
tableData: [ // 假数据
{
id: 1,
paragraph: 'TJ01',
project: '单位工程',
branch: '分部工程',
name: '--',
constructionNum: '--',
inspectionNum: '--',
},
{
id: 2,
paragraph: 'TJ01',
project: '单位工程',
branch: '分部工程',
billing: '月/季/年制度',
name: '--',
constructionNum: '--',
inspectionNum: '--',
},
{
id: 3,
paragraph: 'TJ01',
project: '单位工程1',
branch: '分部工程',
name: '--',
constructionNum: '--',
inspectionNum: '--',
},
{
id: 4,
paragraph: 'TJ01',
project: '单位工程2',
branch: '分部工程',
name: '--',
constructionNum: '--',
inspectionNum: '--',
},
{
id: 5,
paragraph: 'TJ02',
project: '单位工程2',
branch: '分部工程',
name: '--',
constructionNum: '--',
inspectionNum: '--',
},
{
id: 6,
paragraph: 'TJ02',
project: '单位工程1',
branch: '分部工程',
name: '--',
constructionNum: '--',
inspectionNum: '--',
},
{
id: 7,
paragraph: 'TJ02',
project: '单位工程1',
branch: '分部工程',
name: '--',
constructionNum: '--',
inspectionNum: '--',
},
{
id: 8,
paragraph: 'TJ02',
project: '单位工程',
branch: '分部工程',
name: '--',
constructionNum: '--',
inspectionNum: '--',
},
],
paragraph_merageArr: [], // 第一列进行合并操作时存放的数组变量
paragraph_meragePos: 0, // 上面的数组的下标值
project_merageArr: [], // 第二列进行合并操作时存放的数组变量
project_meragePos: 0,// 上面的数组的下标值
branch_merageArr: [], // 第三列进行合并操作时存放的数组变量
branch_meragePos: 0,// 上面的数组的下标值
};
},
computed: { ...mapGetters(["account_searchForm","inspectionDetection",'paragraph_show']) },
watch: {
},
methods: {
merageInit() { // 在下文的时候会用到，对数据进行初始化是很有必要的
this.paragraph_merageArr = [];
this.paragraph_meragePos = 0;
this.project_merageArr = [];
this.project_meragePos = 0;
this.branch_merageArr = [];
this.branch_meragePos = 0;
},
// 合并多列专用
merage() {
this.merageInit(); // 前文的初始化数据函数
for (let i = 0; i < this.tableData.length; i++) {
if (i === 0) {
// 第一行必须存在
this.paragraph_merageArr.push(1);
this.paragraph_meragePos = 0;
this.project_merageArr.push(1);
this.project_meragePos = 0;
this.branch_merageArr.push(1);
this.branch_meragePos = 0;
} else {
// 判断当前元素与上一个元素是否相同,eg：this.paragraph_meragePos 是 this.typeNameArr序号
// 第一列
if (this.tableData[i].paragraph === this.tableData[i - 1].paragraph) {
this.paragraph_merageArr[this.paragraph_meragePos] += 1;
this.paragraph_merageArr.push(0);
} else {
this.paragraph_merageArr.push(1);
this.paragraph_meragePos = i;
}
// 第二列
if (this.tableData[i].project === this.tableData[i - 1].project && this.tableData[i].paragraph === this.tableData[i - 1].paragraph) {
this.project_merageArr[this.project_meragePos] += 1;
this.project_merageArr.push(0);
} else {
this.project_merageArr.push(1);
this.project_meragePos = i;
}
// 第三列
if (this.tableData[i].branch === this.tableData[i - 1].branch && this.tableData[i].project === this.tableData[i - 1].project && this.tableData[i].paragraph === this.tableData[i - 1].paragraph) {
this.branch_merageArr[this.branch_meragePos] += 1;
this.branch_merageArr.push(0);
} else {
this.branch_merageArr.push(1);
this.branch_meragePos = i;
}
}
}
},
// 合并专用
objectSpanMethod({ row, column, rowIndex, columnIndex }) {
if (columnIndex === 0) {
// 第一列的合并方法
const row1 = this.paragraph_merageArr[rowIndex];
const col1 = row1 > 0 ? 1 : 0; // 如果被合并了row = 0; 则他这个列需要取消
return {
rowspan: row1,
colspan: col1,
};
} else if (columnIndex === 1) {
// 第二列的合并方法
const row2 = this.project_merageArr[rowIndex];
const col2 = row2 > 0 ? 1 : 0; // 如果被合并了row = 0; 则他这个列需要取消
return {
rowspan: row2,
colspan: col2,
};
} else if (columnIndex === 2) {
// 第三列的合并方法
const row3 = this.branch_merageArr[rowIndex];
const col3 = row3 > 0 ? 1 : 0; // 如果被合并了row = 0; 则他这个列需要取消
return {
rowspan: row3,
colspan: col3,
};
}
},
},
created() {
this.page_export = this.inspectionDetection.record_account.page_export;
},
mounted() {
this.merage()
}
};
</script>
<style lang="scss" scoped>
.title_exportBox {
.title {
width: calc(100% - 56px);
font-size: 20px;
font-weight: bold;
text-align: center;
line-height: 34px;
text-align: center;
}
}
</style>
华为开发者空间，是为全球开发者打造的专属开发空间，汇聚了华为优质开发资源及工具，致力于让每一位开发者拥有一台云主机，基于华为根生态开发、创新。
更多推荐
3
0- 0
已为社区贡献2条内容
所有评论(0)