效果图
一，固定的表头
<template>
<div class="hello">
<el-table :data="list" style="width: 100%" align="center" show-summary>
<el-table-column prop="bunen" label="部门" width="100%" align="center"></el-table-column>
<el-table-column label="2018-02-22" align="center">
<el-table-column prop="qishu" label="起数" align="center"></el-table-column>
<el-table-column prop="jiner" label="金额" align="center"></el-table-column>
</el-table-column>
<el-table-column label="2018-02-22" align="center">
<el-table-column prop="qishu" label="起数" align="center"></el-table-column>
<el-table-column prop="jiner" label="金额" align="center"></el-table-column>
</el-table-column>
<el-table-column label="2018-02-22" align="center">
<el-table-column prop="qishu" label="起数" align="center"></el-table-column>
<el-table-column prop="jiner" label="金额" align="center"></el-table-column>
</el-table-column>
<el-table-column prop="sunxiaoji" label="起数小计" width="100%" align="center"></el-table-column>
<el-table-column prop="sumjiner" label="金额小计" width="100%" align="center"></el-table-column>
</el-table>
</div>
</template>
<script>
export default {
name: "HelloWorld",
props: {},
data() {
return {
tableHeader: {
bumen: "部门",
sumqi: "1655",
sumjiner: "1655",
yuefen: [
{
mouth: "2019年5月",
qishu: "起数",
jiner: "金额"
},
{
mouth: "2019年5月",
qishu: "起数",
jiner: "金额"
},
{
mouth: "2019年5月",
qishu: "起数",
jiner: "金额"
},
{
mouth: "2019年5月",
qishu: "起数",
jiner: "金额"
},
{
mouth: "2019年5月",
qishu: "起数",
jiner: "金额"
}
]
},
list: [
{
id: "sdasda3434kjkddkj",
bunen: "部门1",
qishu: "22",
jiner: "33",
sunxiaoji: "555", //合计总数
sumjiner: "555" //合计金额
},
{
id: "sdasda3434fgkjkkj",
bunen: "部门2",
qishu: "225",
jiner: "33",
sunxiaoji: "555",
sumjiner: "555"
},
{
id: "sdasdasda3434kjkkj",
bunen: "部门3",
qishu: "22",
jiner: "323",
sunxiaoji: "555",
sumjiner: "555"
},
//最后一条数据是百分比
{
bunen: "百分比",
qishu: "22%",
jiner: "32%",
sunxiaoji: "55%",
sumjiner: "55%"
}
]
};
},
methods: {}
};
</script>
<style scoped lang="scss">
</style>
二，动态表格表头
<template>
<div class="hello">
<el-table :data="list" style="width: 100%" align="center" show-summary>
<el-table-column prop="bunen" :label="tableHeader.bumen" width="100%" align="center"></el-table-column>
<el-table-column
align="center"
v-for="(item,i) in tableHeader.yuefen"
:key="i"
:label="item.mouth"
>
<el-table-column prop="qishu" :label="item.qishu" align="center"></el-table-column>
<el-table-column prop="jiner" :label="item.jiner" align="center"></el-table-column>
</el-table-column>
<el-table-column prop="sunxiaoji" :label="tableHeader.sumqi" width="100%" align="center"></el-table-column>
<el-table-column prop="sumjiner" :label="tableHeader.sumjiner" width="100%" align="center"></el-table-column>
</el-table>
</div>
</template>
<script>
export default {
name: "HelloWorld",
props: {},
data() {
return {
tableHeader: {
bumen: "部门",
sumqi: "起数小计",
sumjiner: "金额小计",
yuefen: [
{
mouth: "2019年5月",
qishu: "起数",
jiner: "金额"
},
{
mouth: "2019年6月",
qishu: "起数",
jiner: "金额"
},
{
mouth: "2019年7月",
qishu: "起数",
jiner: "金额"
},
{
mouth: "2019年8月",
qishu: "起数",
jiner: "金额"
},
{
mouth: "2019年9月",
qishu: "起数",
jiner: "金额"
}
]
},
list: [
{
id: "sdasda3434kjkddkj",
bunen: "部门1",
qishu: "22",
jiner: "33",
sunxiaoji: "555", //合计总数
sumjiner: "555" //合计金额
},
{
id: "sdasda3434fgkjkkj",
bunen: "部门2",
qishu: "225",
jiner: "33",
sunxiaoji: "555",
sumjiner: "555"
},
{
id: "sdasdasda3434kjkkj",
bunen: "部门3",
qishu: "22",
jiner: "323",
sunxiaoji: "555",
sumjiner: "555"
},
//最后一条数据是百分比
{
bunen: "百分比",
qishu: "22%",
jiner: "32%",
sunxiaoji: "55%",
sumjiner: "55%"
}
]
};
},
methods: {}
};
</script>
<style scoped lang="scss">
</style>
<template>
<div class="hello">
<table class="gridtable" >
<!-- 头部 -->
<thead>
<tr>
<th rowspan="2" >{{tableHeader.bumen}}</th>
<template>
<th colspan="2" v-for="(item,i) in tableHeader.yuefen" :key="i">{{item.mouth}}</th>
</template>
<th rowspan="2">{{tableHeader.sumqi}}</th>
<th rowspan="2">{{tableHeader.sumjiner}}</th>
</tr>
<tr>
<template v-for="item in tableHeader.yuefen" >
<th>{{item.qishu}}</th>
<th>{{item.jiner}}</th>
</template>
<!-- <th>起数</th>
<th>金额</th>
<th>起数</th>
<th>金额</th>
<th>起数</th>
<th>金额</th> -->
</tr>
</thead>
<tbody>
<!-- 数据 -->
<tr v-for="(item,i) in list" :key="i">
<th>浦东</th>
<td>555</td>
<td>555</td>
<td>555</td>
<td>555</td>
<td>555</td>
<td>555</td>
<td>555</td>
<td>555</td>
<td>555</td>
<td>555</td>
<td>2555</td>
<td>2555</td>
</tr>
<tr>
<th>闵行</th>
<td>555</td>
<td>555</td>
<td>555</td>
<td>555</td>
<td>555</td>
<td>555</td>
<td>555</td>
<td>555</td>
<td>555</td>
<td>555</td>
<td>2555</td>
<td>2555</td>
</tr>
</tbody>
</table>
</div>
</template>
<script>
// @ is an alias to /src
import HelloWorld from '@/components/public.vue'
export default {
name: "HelloWorld",
props: {},
data() {
return {
tableHeader: {
bumen: "部门",
sumqi: "起数小计",
sumjiner: "金额小计",
yuefen: [
{
mouth: "2019年5月",
qishu: "起数",
jiner: "金额"
},
{
mouth: "2019年6月",
qishu: "起数",
jiner: "金额"
},
{
mouth: "2019年7月",
qishu: "起数",
jiner: "金额"
},
{
mouth: "2019年8月",
qishu: "起数",
jiner: "金额"
},
{
mouth: "2019年9月",
qishu: "起数",
jiner: "金额"
}
]
},
list: [
{
id: "sdasda3434kjkddkj",
bunen: "部门1",
qishu: "225",
jiner: "33",
sunxiaoji: "555",
sumjiner: "555"
},
{
id: "sdasda3434fgkjkkj",
bunen: "部门2",
qishu: "225",
jiner: "33",
sunxiaoji: "555",
sumjiner: "555"
},
{
id: "sdasdasda3434kjkkj",
bunen: "部门3",
qishu: "22",
jiner: "323",
sunxiaoji: "555",
sumjiner: "555"
},
//最后一条数据是百分比
{
bunen: "百分比",
qishu: "22%",
jiner: "32%",
sunxiaoji: "55%",
sumjiner: "55%"
}
]
};
},
methods: {}
};
</script>
<style lang='less' scoped>
.gridtable {
word-wrap: break-word; word-break: break-all;
font-family: verdana,arial,sans-serif;
width: 100%;
font-size:11px;
color:#333333;
border-width: 1px;
border-color: #cccccc;
border-collapse: collapse;
line-height: 2em;
th {
text-align: center;
border-width: 1px;
width:120px;
padding: 8px;
border-style: solid;
border-color: #cccccc;
background-color: #dedede;
}
td {
text-align: center;
border-width: 1px;
padding: 8px;
border-style: solid;
border-color: #cccccc;
background-color: #ffffff;
}
}
</style>
