先上原型图,用 element 制作一个相似这样的表格,刚开始想的是用一个表格去实现,然而 … 想多了,最初用多个表格沉积实现,(注:只关注表格实现,表格中所有数据都是捏造的。)
1、客户根本信息表格
此表格次要做以下操作,1、删除生成表格的第一行空表格(为什么会有空行,还没明确,有晓得的搭档能够留言告知),2、合并客户名称值的列,3、将客户名称值字段靠左显示
<el-table
:data="tableData"
size="mini"
class="mt10 tableBaseInfo"
:header-row-class-name="hiddenHeaderRow"
:span-method="arraySpanMethod1"
:cell-class-name="setTextLeft"
>
<el-table-column label="客户根本信息" align="center">
<el-table-column prop="name" align="center"></el-table-column>
<el-table-column prop="nameValue" align="center"></el-table-column>
<el-table-column prop="month" align="center"></el-table-column>
<el-table-column prop="monthValue" align="center"></el-table-column>
</el-table-column>
</el-table>
export default {data() {
return {
tableData: [
{
name: "客户名称",
nameValue: "测试 1",
month: "",
monthValue: "",
},
{
name: "客户户号",
nameValue: "123456789",
month: "结算月份",
monthValue: "2",
},
],
}
},
methods: {
// 暗藏表格空的行 -- 这块的起因还没搞清楚,生成的表格会有一行是空的
hiddenHeaderRow({rowIndex}) {if (rowIndex == 1) {
// 暗藏第二行
return "hiddenClass";
}
},
// 合并客户根本信息表格客户名称单元格
arraySpanMethod1({rowIndex, columnIndex}) {if (rowIndex == 0) {if (columnIndex != 0) {return [1, 3];
}
}
},
// 设置客户根本信息表格客户名称靠左显示
setTextLeft({rowIndex, columnIndex}) {if (rowIndex == 0) {if (columnIndex != 0) {return "textAlignLeft";}
}
},
}
}
2、客户电量电费信息表格
这个表格和失常表格一样开发就行,只是最初一行是字体加粗,色彩有设置,在 table 上增加:cell-class-name=”setTextWeight” 属性,在办法中对 setTextWeight 进行设置即可,而后设置 text-set 款式即可。
// 设置客户电量电费信息中批发交易电费加粗显示
setTextWeight({rowIndex, columnIndex}) {if (rowIndex == 10) {return "text-set";}
},
3、客户偏差考核信息
操作:1、合并单元格,2、文案靠右显示
// 设置第一档和第二档正偏差电价、负偏差电价靠右显示
setTextRight({rowIndex, columnIndex}) {if (rowIndex == 1 || rowIndex == 4) {if (columnIndex != 0) {return "textAlignRight";}
}
},
// 设置第一档和第二档正偏差电价、负偏差电价合并单元格
arraySpanMethod2({rowIndex, columnIndex}) {
// 示意行数,不蕴含表头行数
if (rowIndex == 1 || rowIndex == 4) {
// 去掉第一列之后的所有列进行合并
if (columnIndex != 0) {return [1, 4];
}
}
},
4、客户其他费用
操作:1、合并单元格,2、文案靠左显示,3、文案色彩,宽度设置
// 合并客户其他费用中最初两行
arraySpanMethod3({rowIndex, columnIndex}) {if (rowIndex == 4 || rowIndex == 5) {return [1, 4];
}
},
// 设置客户其他费用中最初两行字体加粗
setCustomTextLeft({rowIndex, columnIndex}) {if (rowIndex == 4 || rowIndex == 5) {return "textCustomAlignLeft";}
},
大部分都是进行单元格合并和文案设置,element 有提供对应的属性和办法。看看效果图,页面太长,分两张截图展现:
基本上和要求的表格差不多了,大家有好的实现计划能够告知我,我也学习下,下次就不必搞这么多 table 了,以下附上源码,
<el-table
:data="tableData"
size="mini"
class="mt10 tableBaseInfo"
:header-row-class-name="hiddenHeaderRow"
:span-method="arraySpanMethod1"
:cell-class-name="setTextLeft"
>
<el-table-column label="客户根本信息" align="center">
<el-table-column prop="name" align="center"></el-table-column>
<el-table-column prop="nameValue" align="center"></el-table-column>
<el-table-column prop="month" align="center"></el-table-column>
<el-table-column prop="monthValue" align="center"></el-table-column>
</el-table-column>
</el-table>
<el-table
:data="tableData1"
size="mini"
class="no-header-only"
:cell-class-name="setTextWeight"
>
<el-table-column label="客户电量电费信息" align="center">
<el-table-column
prop="name"
align="center"
lable=""
></el-table-column>
<el-table-column
prop="sharpVal"
align="center"
label="尖峰"
></el-table-column>
<el-table-column
prop="peakVal"
align="center"
label="顶峰"
></el-table-column>
<el-table-column
prop="valleyVal"
align="center"
label="低谷"
></el-table-column>
<el-table-column
prop="fixedVal"
align="center"
label="一口价"
></el-table-column>
<el-table-column
prop="total"
align="center"
label="总计"
></el-table-column>
</el-table-column>
</el-table>
<el-table size="mini" class="no-data">
<el-table-column label="客户偏差考核信息" align="center">
</el-table-column>
</el-table>
<el-table
:data="tableData2"
size="mini"
class="firstAppraisal no-header-only"
:span-method="arraySpanMethod2"
:cell-class-name="setTextRight"
>
<el-table-column label="(第一档偏差考核)" align="center">
<el-table-column
prop="name"
align="center"
lable=""
></el-table-column>
<el-table-column
prop="sharpVal"
align="center"
label="尖峰"
></el-table-column>
<el-table-column
prop="peakVal"
align="center"
label="顶峰"
></el-table-column>
<el-table-column
prop="valleyVal"
align="center"
label="低谷"
></el-table-column>
<el-table-column
prop="fixedVal"
align="center"
label="一口价"
></el-table-column>
</el-table-column>
</el-table>
<el-table
:data="tableData3"
size="mini"
class="firstAppraisal no-header-only"
:span-method="arraySpanMethod2"
:cell-class-name="setTextRight"
>
<el-table-column label="(第二档偏差考核)" align="center">
<el-table-column
prop="name"
align="center"
lable=""
></el-table-column>
<el-table-column
prop="sharpVal"
align="center"
label="尖峰"
></el-table-column>
<el-table-column
prop="peakVal"
align="center"
label="顶峰"
></el-table-column>
<el-table-column
prop="valleyVal"
align="center"
label="低谷"
></el-table-column>
<el-table-column
prop="fixedVal"
align="center"
label="一口价"
></el-table-column>
</el-table-column>
</el-table>
<el-table size="mini" class="no-header" :data="tableData4" border>
<el-table-column label=""align="center"prop="positionVal">
<template slot-scope="scope">
<span class="text-set"
> 正偏差费用: {{scope.row.positionVal}}</span
>
</template>
</el-table-column>
<el-table-column label=""align="center"prop="nagitiveVal">
<template slot-scope="scope">
<span class="text-set"
> 负偏差费用: {{scope.row.nagitiveVal}}</span
>
</template>
</el-table-column>
<el-table-column label=""align="center"prop="totalVal">
<template slot-scope="scope">
<span class="text-set"> 共计: {{scope.row.totalVal}}</span>
</template>
</el-table-column>
</el-table>
<el-table
:data="tableData5"
size="mini"
class="tableBaseInfo no-header-only"
:span-method="arraySpanMethod3"
:header-cell-style="{'text-align':'center'}"
:header-row-class-name="hiddenHeaderRow"
:cell-class-name="setCustomTextLeft"
>
<el-table-column label="客户其他费用(含月度服务费及超用服务费)">
<el-table-column prop="name1" align="center"></el-table-column>
<el-table-column prop="value1" align="center"></el-table-column>
<el-table-column prop="name2" align="center"></el-table-column>
<el-table-column prop="value2" align="center"></el-table-column>
</el-table-column>
</el-table>
export default {data() {
return {
tableData: [
{
name: "客户名称",
nameValue: "xxxxxx",
month: "",
monthValue: "",
},
{
name: "客户户号",
nameValue: "123456",
month: "结算月份",
monthValue: "2",
},
],
tableData1: [
{
name: "理论用电量",
sharpVal: "1",
peakVal: "1",
valleyVal: "1",
fixedVal: "1",
total: "1",
},
{
name: "年度交易电量",
sharpVal: "2",
peakVal: "2",
valleyVal: "2",
fixedVal: "2",
total: "2",
},
{
name: "年度交易电价",
sharpVal: "2",
peakVal: "2",
valleyVal: "2",
fixedVal: "2",
total: "2",
},
{
name: "年度交易电费",
sharpVal: "2",
peakVal: "2",
valleyVal: "2",
fixedVal: "2",
total: "2",
},
{
name: "月度交易电量",
sharpVal: "2",
peakVal: "2",
valleyVal: "2",
fixedVal: "2",
total: "2",
},
{
name: "月度交易电价",
sharpVal: "2",
peakVal: "2",
valleyVal: "2",
fixedVal: "2",
total: "2",
},
{
name: "月度交易电费",
sharpVal: "2",
peakVal: "2",
valleyVal: "2",
fixedVal: "2",
total: "2",
},
{
name: "超用电量",
sharpVal: "2",
peakVal: "2",
valleyVal: "2",
fixedVal: "2",
total: "2",
},
{
name: "超用电价",
sharpVal: "2",
peakVal: "2",
valleyVal: "2",
fixedVal: "2",
total: "2",
},
{
name: "超用电费",
sharpVal: "2",
peakVal: "2",
valleyVal: "2",
fixedVal: "2",
total: "2",
},
{
name: "批发交易电费",
sharpVal: "3",
peakVal: "3",
valleyVal: "3",
fixedVal: "3",
total: "3",
},
],
tableData2: [
{
name: "正偏差电量",
sharpVal: "1",
peakVal: "1",
valleyVal: "1",
fixedVal: "1",
},
{
name: "正偏差电价",
sharpVal: "2 元 / 千瓦时",
peakVal: "",
valleyVal: "",
fixedVal: "",
},
{
name: "正偏差电费",
sharpVal: "3",
peakVal: "3",
valleyVal: "3",
fixedVal: "3",
},
{
name: "负偏差电量",
sharpVal: "1",
peakVal: "1",
valleyVal: "1",
fixedVal: "1",
},
{
name: "负偏差电价",
sharpVal: "2 元 / 千瓦时",
peakVal: "",
valleyVal: "",
fixedVal: "",
},
{
name: "负偏差电费",
sharpVal: "3",
peakVal: "3",
valleyVal: "3",
fixedVal: "3",
},
],
tableData3: [
{
name: "正偏差电量",
sharpVal: "1",
peakVal: "1",
valleyVal: "1",
fixedVal: "1",
},
{
name: "正偏差电价",
sharpVal: "2 元 / 千瓦时",
peakVal: "",
valleyVal: "",
fixedVal: "",
},
{
name: "正偏差电费",
sharpVal: "3",
peakVal: "3",
valleyVal: "3",
fixedVal: "3",
},
{
name: "负偏差电量",
sharpVal: "1",
peakVal: "1",
valleyVal: "1",
fixedVal: "1",
},
{
name: "负偏差电价",
sharpVal: "2 元 / 千瓦时",
peakVal: "",
valleyVal: "",
fixedVal: "",
},
{
name: "负偏差电费",
sharpVal: "3",
peakVal: "3",
valleyVal: "3",
fixedVal: "3",
},
],
tableData4: [
{
positionVal: "200.03",
nagitiveVal: "300.05",
totalVal: "500.09",
},
],
tableData5: [
{
name1: "月度服务费价格(分)",
value1: "0.5",
name2: "超用服务费价格(分)",
value2: "0.5",
},
{
name1: "月度服务费电量",
value1: "0",
name2: "超用服务费电量",
value2: "12345",
},
{
name1: "月度服务费电费",
value1: "0.5",
name2: "超用服务费电费",
value2: "27.95",
},
{
name1: "损益电费",
value1: "0.5",
name2: "",
value2: "",
},
{
name1: "客户其他费用共计:54.05",
value1: "",
name2: "",
value2: "",
},
{
name1: "客户总电费共计:38540.11",
value1: "",
name2: "",
value2: "",
},
],
};
},
methods: {
// 暗藏表格空的行
hiddenHeaderRow({rowIndex}) {if (rowIndex == 1) {
// 暗藏第二行
return "hiddenClass";
}
},
// 合并客户根本信息表格客户名称单元格
arraySpanMethod1({rowIndex, columnIndex}) {if (rowIndex == 0) {if (columnIndex != 0) {return [1, 3];
}
}
},
// 设置客户根本信息表格客户名称靠左显示
setTextLeft({rowIndex, columnIndex}) {if (rowIndex == 0) {if (columnIndex != 0) {return "textAlignLeft";}
}
},
// 设置客户电量电费信息中批发交易电费加粗显示
setTextWeight({rowIndex, columnIndex}) {if (rowIndex == 10) {return "text-set";}
},
// 设置第一档和第二档正偏差电价、负偏差电价靠右显示
setTextRight({rowIndex, columnIndex}) {if (rowIndex == 1 || rowIndex == 4) {if (columnIndex != 0) {return "textAlignRight";}
}
},
// 设置第一档和第二档正偏差电价、负偏差电价合并单元格
arraySpanMethod2({rowIndex, columnIndex}) {
// 示意行数,不蕴含表头行数
if (rowIndex == 1 || rowIndex == 4) {
// 去掉第一列之后的所有列进行合并
if (columnIndex != 0) {return [1, 4];
}
}
},
// 合并客户其他费用中最初两行
arraySpanMethod3({rowIndex, columnIndex}) {if (rowIndex == 4 || rowIndex == 5) {return [1, 4];
}
},
// 设置客户其他费用中最初两行字体加粗
setCustomTextLeft({rowIndex, columnIndex}) {if (rowIndex == 4 || rowIndex == 5) {return "textCustomAlignLeft";}
},
},
}
<style lang="scss" scoped>
::v-deep .tableBaseInfo {
.hiddenClass {display: none !important;}
.textAlignLeft {text-align: left !important;}
.textCustomAlignLeft {
text-align: left !important;
font-weight: 700;
color: #000;
}
}
::v-deep .no-data .el-table__body-wrapper {display: none;}
::v-deep .firstAppraisal .textAlignRight {text-align: right !important;}
::v-deep .no-header.el-table--border {border-top: none !important;}
::v-deep .no-header .el-table__header-wrapper {display: none;}
::v-deep .no-header-only.el-table--border {border-top: none !important;}
::v-deep .text-set {
color: #000;
font-weight: 700;
}
::v-deep .el-table::before {height: 0;}
</style>