使用element-ui做表格有一些特殊的表格的时候该怎么弄呢?案例二

还有一种就是内容部分有合并:

这种情况的话。需要后台在数据处理上进行配合

<template>

<el-table

border

:span-method="arraySpanMethod"

:data="orgTableData"

>

<el-table-column

prop="shortName"

label="党组织名称"

>

</el-table-column>

<el-table-column

prop="fieldName"

label="管理类型"

>

</el-table-column>

<el-table-column

prop="partyOrgSum"

label="党组织总数"

>

</el-table-column>

<el-table-column

prop="committeeNum"

label="党委数量">

</el-table-column>

<el-table-column

prop="partyAllOrgNum"

label="党总支部数量">

</el-table-column>

<el-table-column

prop="partyOrgNum"

label="党支部数量">

</el-table-column>

<el-table-column

prop="unionPartyOrgNum"

label="联合党支部数量">

</el-table-column>

<el-table-column

prop="tempPartyOrgNum"

label="临时党支部数量">

</el-table-column>

</el-table>

</template>

<script>

export default {

data() {

return {

orgTableData: [

{

shortName: "案例", //党组织名称

fieldName: "25", //管理类型

partyOrgSum: "100", //党组织总数

committeeNum: "80", //党委数量

partyAllOrgNum: "120", //党总支部数量

partyOrgNum: "20", //党支部数量

unionPartyOrgNum: "10", //联合党支部数量

tempPartyOrgNum: "2" //临时党支部数量

},

{

shortName: "案例", //党组织名称

fieldName: "25", //管理类型

partyOrgSum: "100", //党组织总数

committeeNum: "80", //党委数量

partyAllOrgNum: "120", //党总支部数量

partyOrgNum: "20", //党支部数量

unionPartyOrgNum: "10", //联合党支部数量

tempPartyOrgNum: "2" //临时党支部数量

},

{

shortName: "案例", //党组织名称

fieldName: "25", //管理类型

partyOrgSum: "100", //党组织总数

committeeNum: "80", //党委数量

partyAllOrgNum: "120", //党总支部数量

partyOrgNum: "20", //党支部数量

unionPartyOrgNum: "10", //联合党支部数量

tempPartyOrgNum: "2" //临时党支部数量

},

{

shortName: "案例", //党组织名称

fieldName: "25", //管理类型

partyOrgSum: "100", //党组织总数

committeeNum: "80", //党委数量

partyAllOrgNum: "120", //党总支部数量

partyOrgNum: "20", //党支部数量

unionPartyOrgNum: "10", //联合党支部数量

tempPartyOrgNum: "2" //临时党支部数量

},

{

shortName: "案例", //党组织名称

fieldName: "25", //管理类型

partyOrgSum: "100", //党组织总数

committeeNum: "80", //党委数量

partyAllOrgNum: "120", //党总支部数量

partyOrgNum: "20", //党支部数量

unionPartyOrgNum: "10", //联合党支部数量

tempPartyOrgNum: "2" //临时党支部数量

},

{

shortName: "案例", //党组织名称

fieldName: "25", //管理类型

partyOrgSum: "100", //党组织总数

committeeNum: "80", //党委数量

partyAllOrgNum: "120", //党总支部数量

partyOrgNum: "20", //党支部数量

unionPartyOrgNum: "10", //联合党支部数量

tempPartyOrgNum: "2" //临时党支部数量

}

], //下级党组织信息统计表

};

},

methods: {   

arraySpanMethod({ row, column, rowIndex, columnIndex }) {

//这里我的小伙伴儿说涉及到了算法,可能是我太菜了不懂,但是还是让我弄出来了

//合并单元格方法

if (rowIndex % 2 === 0) {

//判断条件可以设置成你想合并的行的起始位置

if (columnIndex === 0) {

//判断条件可以设置成你想合并的列的起始位置

return [2, 1];

}

}

if (rowIndex % 2 === 1) {

//判断条件可以设置成你想合并的行的起始位置

if (columnIndex === 0) {

//判断条件可以设置成你想合并的列的起始位置

return [1, 0];

}

}

}

}

};

</script>

<style scoped>

</style>

猜你喜欢

转载自blog.csdn.net/fengxiaopeng74/article/details/83862684
今日推荐