基础表格
基本数据结构
tableData: [
{
date: "2016-05-02",
name: "王小虎",
address: "上海市普陀区金沙江路 1518 弄",
},
{
date: "2016-05-04",
name: "王小虎",
address: "上海市普陀区金沙江路 1517 弄",
},
{
date: "2016-05-01",
name: "王小虎",
address: "上海市普陀区金沙江路 1519 弄",
},
{
date: "2016-05-03",
name: "王小虎",
address: "上海市普陀区金沙江路 1516 弄",
},
],
带有合并单元格的表格
tableData2: [
{
name: "国家出资人",
list: [
{
name: "2011",
value: "0",
},
{
name: "2012",
value: "0",
},
{
name: "2013",
value: "0",
},
{
name: "2014",
value: "0",
},
],
},
{
name: "国家独资公司",
list: [
{
name: "2011",
value: "1",
},
{
name: "2012",
value: "1",
},
{
name: "2013",
value: "1",
},
{
name: "2014",
value: "1",
},
],
},
{
name: "国有独资企业",
list: [
{
name: "2011",
value: "2",
},
{
name: "2012",
value: "2",
},
{
name: "2013",
value: "2",
},
{
name: "2014",
value: "2",
},
],
},
],
type: [
{
name: "国家出资人",
},
{
name: "国有独资公司",
},
{
name: "国有独资企业",
},
],
tableData3: [
{
name: 2011,
Num2011: 0,
Num2012: 0,
Num2013: 0,
Num2014: 0,
},
{
name: 2012,
Num2011: 1,
Num2012: 1,
Num2013: 1,
Num2014: 1,
},
{
name: 2013,
Num2011: 2,
Num2012: 2,
Num2013: 2,
Num2014: 2,
},
{
name: 2014,
Num2011: 3,
Num2012: 3,
Num2013: 3,
Num2014: 3,
},
],
把一个表格切分为两部分来看，上方的是3行数据，下方的是4行数据，两者无法用最基本的数据结构整合来实现
数据处理
重点是对<template slot-scope="scope">的理解
el-table-column标签的数量决定了表格的列数，tableData数组的长度则决定了表格的行数
scope可以理解为tableData在excel中的映射（el-table-column标签不加prop属性，此时行的数据由scope决定）
代码如下：
<el-table
:data="tableData2"
border
stripe
>
<el-table-column
prop="name"
label="企业类别"
width="180"
>
</el-table-column>
<el-table-column label="企业数量">
<el-table-column
:label="item.name"
width="180"
v-for="(item, index) in tableData2[0].list"
:key="index"
>
<template slot-scope="scope">
<span>
{{scope.row.list[index].value}}
</span>
</template>
</el-table-column>
</el-table-column>
</el-table>
