el-table 表格合并
2023-12-14 本文已影响0人
苏苡
1. 示例：
el-table合并表头.png
2. 具体代码
<el-table
:cell-style="{
fontSize: '14px',
color: '#383838',
}"
align="center"
v-loading="tableLoading"
:data="tableData"
style="width: 100%"
:header-cell-style="headerStyle"
>
<el-table-column
v-for="(item, index) in columnList"
:key="index"
:prop="item.prop"
align="center"
:label="item.label"
>
<el-table-column
v-for="(aaa, idx) in item.children"
:min-width="aaa.width"
:key="idx"
align="center"
:prop="aaa.prop"
:label="aaa.label"
>
<el-table-column
v-for="(bbb, idx) in aaa.children"
:min-width="bbb.width"
:key="idx"
align="center"
:prop="bbb.prop"
:label="bbb.label"
>
<el-table-column
v-for="(ccc, idx) in bbb.children"
:min-width="ccc.width"
:key="idx"
align="center"
:prop="ccc.prop"
:label="ccc.label"
>
<el-table-column
v-for="(ddd, idx) in ccc.children"
:min-width="ddd.width"
:key="idx"
align="center"
:prop="ddd.prop"
:label="ddd.label"
>
<el-table-column
v-for="(eee, idx) in ddd.children"
:min-width="eee.width"
:key="idx"
align="center"
:prop="eee.prop"
:label="eee.label"
>
</el-table-column>
</el-table-column>
</el-table-column>
</el-table-column>
</el-table-column>
</el-table-column>
</el-table>
3. 数据配置以及方法
<script>
import moment from "moment";
export default {
name: "whole",
data() {
return {
tableLoading: false,
tableData: [
{
num1: "100-1",
num2: "200-1",
num3: "300-1",
num4: "400-1",
num5: "500-1",
num6: "600-1",
num7: "700-1",
num8: "800-1",
num9: "900-1",
numA1: "A11-1",
numA2: "A22-1",
numA3: "A33-1",
numA4: "A44-1",
numA5: "A55-1",
numA6: "A66-1",
numA7: "A77-1",
numA8: "A88-1",
numA9: "B99-1",
numB1: "B11-1",
numB2: "B22-1",
numB3: "B33-1",
numB4: "B44-1",
numB5: "B55-1",
numB6: "B66-1",
numB7: "B77-1",
numB8: "B88-1",
numB9: "B99-1",
numC1: "C11-1",
numC2: "C22-1",
numC3: "C33-1",
numC4: "C44-1",
numC5: "C55-1",
numC6: "C66-1",
numC7: "C77-1",
numC8: "C88-1",
numC9: "C99-1",
numD1: "D11-1",
numD2: "D22-1",
numD3: "D33-1",
numD4: "D44-1",
numD4: "D44-1",
numD5: "D55-1",
numD6: "D66-1",
numD7: "D77-1",
numD8: "D88-1",
numD9: "D99-1",
numE1: "E11-1",
numE2: "E22-1",
numE3: "E33-1",
numE4: "E44-1"
},
{
num1: "100-2",
num2: "200-2",
num3: "300-2",
num4: "400-2",
num5: "500-2",
num6: "600-2",
num7: "700-2",
num8: "800-2",
num9: "900-2",
numA1: "A11-2",
numA2: "A22-2",
numA3: "A33-2",
numA4: "A44-2",
numA5: "A55-2",
numA6: "A66-2",
numA7: "A77-2",
numA8: "A88-2",
numA9: "B99-2",
numB1: "B11-2",
numB2: "B22-2",
numB3: "B33-2",
numB4: "B44-2",
numB5: "B55-2",
numB6: "B66-2",
numB7: "B77-2",
numB8: "B88-2",
numB9: "B99-2",
numC1: "C11-2",
numC2: "C22-2",
numC3: "C33-2",
numC4: "C44-2",
numC5: "C55-2",
numC6: "C66-2",
numC7: "C77-2",
numC8: "C88-2",
numC9: "C99-2",
numD1: "D11-2",
numD2: "D22-2",
numD3: "D33-2",
numD4: "D44-2",
numD4: "D44-2",
numD5: "D55-2",
numD6: "D66-2",
numD7: "D77-2",
numD8: "D88-2",
numD9: "D99-2",
numE1: "E11-2",
numE2: "E22-2",
numE3: "E33-2",
numE4: "E44-2"
}
],
// 表头数据：columnList 空prop(数据不需要绑定的默认设置了): noneVal
columnList: [
{
label: "项目",
prop: "noneVal",
children: [
{
label: "项目",
prop: "noneVal",
children: [
{
label: "项目",
prop: "noneVal",
children: [
{
label: "项目",
prop: "noneVal",
children: [
{
label: "项目",
prop: "noneVal",
children: [
{
prop: "num1",
label: "数目 / 区分",
width: "100"
}
],
}
]
}
]
}
]
}
],
},
{
label: "受理内容",
children: [
{
prop: "noneVal",
label: "合计",
children: [
{
prop: "noneVal",
label: "合计",
children: [
{
prop: "noneVal",
label: "件",
children: [
{
prop: "noneVal",
label: "次",
children: [
{
prop: "num2",
label: "数",
width: "50",
},
],
},
],
},
{
prop: "noneVal",
label: "案",
children: [
{
prop: "noneVal",
label: "",
children: [
{
prop: "num3",
label: "数",
width: "50",
}
],
},
],
},
],
},
]
},
{
prop: "noneVal",
label: "其中",
children: [
{
prop: "noneVal",
label: "受理情况",
children: [
{
prop: "noneVal",
label: "件",
children: [
{
prop: "noneVal",
label: "",
children: [
{
prop: "num4",
label: "数",
width: "50",
},
],
}
]
},
{
prop: "noneVal",
label: "案",
children: [
{
prop: "noneVal",
label: "",
children: [
{
prop: "num5",
label: "数",
width: "50",
},
]
}
]
},
],
},
{
prop: "noneVal",
label: "受理结果",
children: [
{
prop: "noneVal",
label: "批",
children: [
{
prop: "noneVal",
label: "",
children: [
{
prop: "num6",
label: "次",
width: "50",
},
]
}
]
},
{
prop: "noneVal",
label: "人",
children: [
{
prop: "noneVal",
label: "",
children: [
{
prop: "num7",
label: "数",
width: "50",
},
]
}
],
},
{
prop: "num8",
label: "案数",
width: "50",
},
{
prop: "noneVal",
label: "其中：集体受理",
children: [
{
prop: "noneVal",
label: "其中：集体受理",
children: [
{
prop: "num9",
label: "批次",
width: "50",
},
{
prop: "numA1",
label: "人数",
width: "50",
},
{
prop: "numA2",
label: "案数",
width: "50",
},
]
}
]
},
],
},
{
prop: "noneVal",
label: "来电受理",
children: [
{
prop: "noneVal",
label: "次",
children: [
{
prop: "noneVal",
label: "",
children: [
{
prop: "numA3",
label: "数",
width: "50",
},
]
}
]
},
{
prop: "noneVal",
label: "案",
children: [
{
prop: "noneVal",
label: "",
children: [
{
prop: "numA4",
label: "数",
width: "50",
},
]
}
]
},
]
},
],
},
{
prop: "noneVal",
label: "处置非正常受理",
children: [
{
prop: "noneVal",
label: "处置非正常受理",
children: [
{
prop: "noneVal",
label: "处置非正常受理",
children: [
{
prop: "noneVal",
label: "处置非正常受理",
children: [
{
prop: "numA5",
label: "批",
width: "50",
},
{
prop: "numA6",
label: "人",
width: "50",
},
],
},
],
},
],
},
]
},
{
prop: "noneVal",
label: "受理人员",
children: [
{
prop: "noneVal",
label: "受理人员",
children: [
{
prop: "noneVal",
label: "受理人员",
children: [
{
prop: "noneVal",
label: "受理人员",
children: [
{
prop: "numA7",
label: "批",
width: "50",
},
{
prop: "numA8",
label: "人",
width: "50",
},
],
},
],
},
],
},
]
},
{
prop: "noneVal",
label: "问题分类（按案数来分）",
children: [
{
prop: "numA9",
label: "小计",
width: "50"
},
{
prop: "numB1",
label: "历史遗留",
width: "50"
},
{
prop: "numB2",
label: "改革改制",
width: "50"
},
{
prop: "numB3",
label: "涉法涉诉",
width: "50"
},
{
prop: "numB4",
label: "纪检监察",
width: "50"
},
{
prop: "numB5",
label: "组织人事",
width: "50"
},
{
prop: "numB6",
label: "退伍军人",
width: "50"
},
{
prop: "numB7",
label: "党务政务",
width: "50"
},
{
prop: "numB8",
label: "劳幼和社会保障",
width: "50"
},
{
prop: "numB9",
label: "医疗卫生",
width: "50"
},
{
prop: "numC1",
label: "经济管理",
width: "50"
},
{
prop: "numC2",
label: "政策法规",
width: "50"
},
{
prop: "numC3",
label: "退休人员社会化",
width: "50"
},
{
prop: "numC4",
label: "疫情租金减免",
width: "50"
},
{
prop: "numC5",
label: "企退医群体",
width: "50"
},
{
prop: "numC6",
label: "职教幼教群体",
width: "50"
},
{
prop: "numC7",
label: "清欠和农名工讨薪",
width: "50"
},
{
prop: "numC8",
label: "高级专家群体",
width: "50"
},
{
prop: "numC9",
label: "其他",
width: "50"
}
]
}
],
},
{
prop: "noneVal",
label: "受理处理",
children: [
{
prop: "noneVal",
label: "已结案数（按案数来分）",
children: [
{
prop: "numD1",
label: "合计",
width: "50",
},
{
prop: "noneVal",
label: "其中",
children: [
{
prop: "numD2",
label: "受理",
width: "50",
},
{
prop: "numD3",
label: "访问",
width: "50",
},
{
prop: "numD4",
label: "来电",
width: "50",
}
]
}
]
},
{
prop: "noneVal",
label: "未结案数（按案数来分）",
children: [
{
prop: "numD5",
label: "合计",
width: "50",
},
{
prop: "noneVal",
label: "其中",
children: [
{
prop: "numD6",
label: "受理",
width: "50",
},
{
prop: "numD7",
label: "访问",
width: "50",
},
{
prop: "numD8",
label: "来电",
width: "50",
}
]
}
]
},
{
prop: "noneVal",
label: "处级以上领导受理",
width: "70",
children: [
{
prop: "numD9",
label: "领导受理（次）",
width: "70",
},
{
prop: "numE1",
label: "领导未受理（次）",
width: "70",
},
{
prop: "numE2",
label: "领导包案（件）",
width: "70",
},
{
prop: "numE3",
label: "领导办理受理事件（件）",
width: "70",
},
{
prop: "numE4",
label: "领导约谈企业负责人（次）",
width: "70",
},
]
},
]
},
],
};
},
computed: {},
async created() {
this.getTableData()
},
mounted() {},
methods: {
// 表头合并的方法
headerStyle({ row, column, rowIndex, columnIndex }) {
const comStyle = {
background: '#F0F3FA',
height: '42px',
fontSize: '14px',
color: '#333333',
};
// 项目 合并计算
if (rowIndex === 0 && columnIndex === 0) {
this.$nextTick(() => {
document
.getElementsByClassName(column.id)[0]
.setAttribute("rowSpan", 5);
return comStyle;
});
}
if ((rowIndex === 1 || rowIndex === 2 || rowIndex === 3 || rowIndex === 4) && (columnIndex == 0)) {
return {
display: "none",
...comStyle,
};
}
// 合计 合并计算
if (rowIndex === 1 && columnIndex === 1) {
this.$nextTick(() => {
document
.getElementsByClassName(column.id)[0]
.setAttribute("rowSpan", 2);
return comStyle;
});
}
if (rowIndex === 2 && columnIndex == 1) {
return {
display: "none",
...comStyle,
};
}
// 其中：集体受理 合并计算
if (rowIndex === 3 && columnIndex === 8) {
this.$nextTick(() => {
document
.getElementsByClassName(column.id)[0]
.setAttribute("rowSpan", 2);
return comStyle;
});
}
if (rowIndex === 4 && columnIndex === 7) {
return {
display: "none",
...comStyle,
};
}
// 处置非正常受理 合并计算
if (rowIndex === 1 && columnIndex === 3) {
this.$nextTick(() => {
document
.getElementsByClassName(column.id)[0]
.setAttribute("rowSpan", 4);
return comStyle;
});
}
if ((rowIndex === 2 && columnIndex === 5) || (rowIndex === 3 && columnIndex === 11) || (rowIndex === 4 && columnIndex === 10)) {
return {
display: "none",
...comStyle,
};
}
// 受理人员 合并计算
if (rowIndex === 1 && columnIndex === 4) {
this.$nextTick(() => {
document
.getElementsByClassName(column.id)[0]
.setAttribute("rowSpan", 4);
return comStyle;
});
}
if ((rowIndex === 2 && columnIndex === 6) || (rowIndex === 3 && columnIndex === 12) || (rowIndex === 4 && columnIndex === 11)) {
return {
display: "none",
...comStyle,
};
}
return comStyle;
}
},
};
</script>
