利用element-ui的表格实现复杂合并单元格
利用element-ui的表格实现复杂合并单元格
话不多说，先呈效果图
首先我们得先了解下请求回来的数据是否和我一致哦，不一致的话可能文章就对你没啥用啦,以下是请求回来的数据（数据有点多哈，主要让你们看看数据格式是否和我一样）
"list":[
{
"rowNum":null,
"industry":"SCBC",
"custCode":"001421",
"custname":"深圳软件科技有限公司",
"draftType":"1",
"draftTypeName":"银票-电票",
"lastBal":"0.00",
"curIncreased":"5,200,000.00",
"saEndorseLessen":"0.00",
"collectionLessen":"0.00",
"endorseLessen":"5,200,000.00",
"discountLessen":"0.00",
"curLessen":"5,200,000.00",
"curBal":"0.00"
},
{
"rowNum":null,
"industry":"SCBC",
"custCode":"001421",
"custname":"深圳软件科技有限公司",
"draftType":"4",
"draftTypeName":"合计",
"lastBal":"0.00",
"curIncreased":"5,200,000.00",
"saEndorseLessen":"0.00",
"collectionLessen":"0.00",
"endorseLessen":"5,200,000.00",
"discountLessen":"0.00",
"curLessen":"5,200,000.00",
"curBal":"0.00"
},
{
"rowNum":null,
"industry":"SCBC",
"custCode":"001560",
"custname":"海外电子有限公司",
"draftType":"1",
"draftTypeName":"银票-电票",
"lastBal":"0.00",
"curIncreased":"4,053,269.00",
"saEndorseLessen":"0.00",
"collectionLessen":"5,926,320.41",
"endorseLessen":"1,586,395.00",
"discountLessen":"0.00",
"curLessen":"7,512,715.41",
"curBal":"5,849,311.00"
},
{
"rowNum":null,
"industry":"SCBC",
"custCode":"001560",
"custname":"海外电子有限公司",
"draftType":"4",
"draftTypeName":"合计",
"lastBal":"0.00",
"curIncreased":"4,053,269.00",
"saEndorseLessen":"0.00",
"collectionLessen":"5,926,320.41",
"endorseLessen":"1,586,395.00",
"discountLessen":"0.00",
"curLessen":"7,512,715.41",
"curBal":"5,849,311.00"
},
{
"rowNum":null,
"industry":"白电",
"custCode":"001353",
"custname":"家用电器有限公司",
"draftType":"1",
"draftTypeName":"银票-电票",
"lastBal":"0.00",
"curIncreased":"45,964,536.65",
"saEndorseLessen":"0.00",
"collectionLessen":"0.00",
"endorseLessen":"169,679,484.78",
"discountLessen":"0.00",
"curLessen":"169,679,484.78",
"curBal":"42,964,536.65"
},
{
"rowNum":null,
"industry":"白电",
"custCode":"001353",
"custname":"家用电器有限公司",
"draftType":"3",
"draftTypeName":"商票-T票通",
"lastBal":"0.00",
"curIncreased":"13,073,200.00",
"saEndorseLessen":"0.00",
"collectionLessen":"3,650,400.00",
"endorseLessen":"0.00",
"discountLessen":"0.00",
"curLessen":"3,650,400.00",
"curBal":"49,875,680.00"
},
{
"rowNum":null,
"industry":"白电",
"custCode":"001353",
"custname":"家用电器有限公司",
"draftType":"4",
"draftTypeName":"合计",
"lastBal":"0.00",
"curIncreased":"59,037,736.65",
"saEndorseLessen":"0.00",
"collectionLessen":"3,650,400.00",
"endorseLessen":"169,679,484.78",
"discountLessen":"0.00",
"curLessen":"173,329,884.78",
"curBal":"92,840,216.65"
},
{
"rowNum":null,
"industry":"白电",
"custCode":"001354",
"custname":"家用电器（合肥）有限公司",
"draftType":"1",
"draftTypeName":"银票-电票",
"lastBal":"0.00",
"curIncreased":"180,141,055.87",
"saEndorseLessen":"0.00",
"collectionLessen":"115,337.61",
"endorseLessen":"16,001,969.83",
"discountLessen":"113,258,142.22",
"curLessen":"129,375,449.66",
"curBal":"81,004,027.13"
},
{
"rowNum":null,
"industry":"白电",
"custCode":"001354",
"custname":"家用电器（合肥）有限公司",
"draftType":"2",
"draftTypeName":"商票-外部商票",
"lastBal":"0.00",
"curIncreased":"0.00",
"saEndorseLessen":"0.00",
"collectionLessen":"0.00",
"endorseLessen":"0.00",
"discountLessen":"0.00",
"curLessen":"0.00",
"curBal":"602,728.00"
},
{
"rowNum":null,
"industry":"白电",
"custCode":"001354",
"custname":"家用电器（合肥）有限公司",
"draftType":"3",
"draftTypeName":"商票-T票通",
"lastBal":"0.00",
"curIncreased":"20,271,290.98",
"saEndorseLessen":"0.00",
"collectionLessen":"15,453,326.83",
"endorseLessen":"1,364,560.00",
"discountLessen":"0.00",
"curLessen":"16,817,886.83",
"curBal":"113,413,717.06"
},
{
"rowNum":null,
"industry":"白电",
"custCode":"001354",
"custname":"家用电器（合肥）有限公司",
"draftType":"4",
"draftTypeName":"合计",
"lastBal":"0.00",
"curIncreased":"200,412,346.85",
"saEndorseLessen":"0.00",
"collectionLessen":"15,568,664.44",
"endorseLessen":"17,366,529.83",
"discountLessen":"113,258,142.22",
"curLessen":"146,193,336.49",
"curBal":"195,020,472.19"
}]
如果你看到这里你还打算往下看的话，恭喜你可以直接照搬我的方法啦(文件路径，请求路径，请求之类的记得自己改一下哦)
1.新建一个js文件并引入到main.js中
js文件
//头部颜色
const headerColor = function(rowIndex) {
if (rowIndex === 0) {
return { background: "#e92323", color: "#fff" };
} else {
return { background: "#133890", color: "#fff" };
}
}
//斑马条纹（bg和bgnone为类名，可以在类名写样式）
const tableRowClassName = function(rowIndex) {
if (rowIndex % 2 === 0) {
return "bg";
} else {
return "bgnone";
}
}
//转化下请求回来的数据
const listHandle = function(list) {
for (var key in list[0]) {
var k = 0;
var j = 0;
while (k < list.length) {
list[k][key + "count"] = 1;
list[k][key + 'number'] = j;
for (var i = k + 1; i <= list.length - 1; i++) {
if (list[k][key] == list[i][key] && list[k][key] != "") {
list[k][key + "count"]++;
list[i][key + "count"] = 0;
list[i][key + 'number'] = j;
} else {
break;
}
}
j++
k = i;
}
}
return list;
}
export {
headerColor,
tableRowClassName,
listHandle
}
2.将以上的js文件引入main.js
import {headerColor，tableRowClassName,listHandle} from “js文件的路径”
Vue.prototype.$headerColor = headerColor
Vue.prototype.$tableRowClassName = tableRowClassName
Vue.prototype.$listHandle = listHandle
3.在vue文件中使用过
vue文件
</template>
<el-table
:data="tableList"
class="table_content"
height="calc(100% - 30px)"
border
:row-class-name="tableRowClassName"
:span-method="objectSpanMethod"
:header-cell-style="headerColor"
style="width: 100%"
>
<el-table-column
label="产业"
width="97"
prop="industry"
:show-overflow-tooltip="true"
align="center"
>
//产业这里使用了插槽是为了加背景色（由于合并表格以后表格斑马纹颜色会发生错乱，只能加个div覆盖错乱的颜色，不需要可去掉）
<template slot-scope="scope">
<div
:style="
'height:' +
scope.row.industrycount * 40 +
'px;line-height:' +
scope.row.industrycount * 40 +
'px'
"
:class="
scope.row.industrynumber % 2 === 0
? 'blue text_ellipsis'
: 'white text_ellipsis'
"
>
{{ scope.row.industry }}
</div>
</template>
</el-table-column>
<el-table-column
prop="custname"
label="法人"
:show-overflow-tooltip="true"
width="360"
>
//法人同产业使用插槽原因一样
<template slot-scope="scope">
<div
:style="
'height:' +
scope.row.custnamecount * 40 +
'px;line-height:' +
scope.row.custnamecount * 40 +
'px'
"
:class="
scope.row.custnamenumber % 2 === 0
? 'white text_ellipsis'
: 'blue text_ellipsis'
"
>
{{ scope.row.custname }}
</div>
</template>
</el-table-column>
<el-table-column
width="140"
:show-overflow-tooltip="true"
prop="draftTypeName"
align="center"
label="票据类型"
>
</el-table-column>
<el-table-column
prop="lastBal"
width="140"
align="center"
:show-overflow-tooltip="true"
label="上月余额"
>
</el-table-column>
<el-table-column
prop="curIncreased"
width="140"
align="right"
:show-overflow-tooltip="true"
label="本月新增"
>
</el-table-column>
<el-table-column label="本月减少" align="center">
<el-table-column
width="150"
:show-overflow-tooltip="true"
align="right"
prop="saEndorseLessen"
label="质押"
>
</el-table-column>
<el-table-column
width="150"
:show-overflow-tooltip="true"
align="right"
prop="collectionLessen"
label="到期托收"
>
</el-table-column>
<el-table-column
width="150"
:show-overflow-tooltip="true"
align="right"
prop="endorseLessen"
label="背书"
>
</el-table-column>
<el-table-column
width="150"
:show-overflow-tooltip="true"
align="right"
prop="discountLessen"
label="贴现"
>
</el-table-column>
<el-table-column
width="150"
:show-overflow-tooltip="true"
align="right"
prop="curLessen"
label="合计"
>
</el-table-column>
</el-table-column>
<el-table-column
width="174"
:show-overflow-tooltip="true"
align="right"
prop="curBal"
label="本月余额"
>
</el-table-column>
</el-table>
</template>
<script>
export default {
data () {
return {
tableList:[],
};
},
created(){
axios({
url:'请求数据的地址'，
method：'get',
}).then(res=>{
this.tableList = this.$listHandle(res.data.dat.list)
})
}
//合并单元格（此方法需要结合this.$listHandle(res.data.dat.list)处理过的数据）
objectSpanMethod({ row, column, rowIndex, columnIndex }) {
//找到第一列
if (columnIndex === 0) {
//industrycount是需要合并的字段（这里第一列合并的字段是industrycount，industrycount是经过this.$listHandle处理过的数据，是SCBC的合并的个数）
//如果合并的个数大于1的话
if (row.industrycount > 1) {
return {
rowspan: row.industrycount,
colspan: 1,
};
} else if(row.industrycount === 1){
return {
rowspan: 1,
colspan: 1,
};
}else{
return {
rowspan: 0,
colspan: 0,
};
}
}
//第二列与第一列同理
if (columnIndex === 1) {
if (row.custnamecount > 1) {
return {
rowspan: row.custnamecount,
colspan: 1,
};
} else if (row.custnamecount === 1) {
return {
rowspan: 1,
colspan: 1,
};
} else {
return {
rowspan: 0,
colspan: 0,
};
}
}
},
//表格头部颜色
headerColor({ rowIndex, columnIndex }) {
return this.$headerColor(rowIndex);
},
//改变合计那一行的背景色
tableRowClassName({ row, rowIndex }) {
if (row.draftTypeName == "合计") {
return "hang";
}
return this.$tableRowClassName(rowIndex);
},
}
</script>
<style scoped lang="scss">
::v-deep .hang {
background: #cff39d;
font-weight: bold;
}
.blue {
background: #d5dffc;
width: 100%;
height: 100%;
box-sizing: border-box;
padding: 0 10px;
}
.white {
background: #fff;
width: 100%;
height: 100%;
box-sizing: border-box;
padding: 0 10px;
}
</style>
注：经过this.$listHandle()处理的数据，第一条数据的SCBC的industrycount是计算出SCBC合并的个数，第二条数据后的SCBC的industrycount都为0，至于为什么要这样处理数据呢，那是因为element表格的 return { rowspan: 0,colspan: 0, }表示隐藏该单元格，return { rowspan: 1,colspan: 1, }表示合并一行一列
（刚接触写文章，写的有些烂，语言组织方面可能也有些问题，大家莫怪哈）