一、分析需求
这里先上一张图说明 需求 ：
根据后端返回的数据 （ res 是一个数组，它的元素是一个对象，对象里面的
ext 属性是一个对象，它又包含了，
default 、
free 和
pay 三个属性，且这三个都是数组格式。）：
渲染出一个这样子的
： 表格
res 数据：
res 的每一个元素的直接属性
name （即为邮费模板名称，比如成都运费模板），
res 的
ext 属性下的三个数组
default 、
free 、
pay ，每一个数组要大的一行（这一行中，第一列是运送到的地址的名字，这里定义的是
area 属性，但后端是未给到这个字段的，可自己处理数据添加该字段 ，这里就不细说了。） 这个
area 属性占据的这一列，在页面的展示效果 应该是多行合并的效果。 
二、代码实现：
<template>
<div class="layout">
<el-table :data="res" >
<el-table-column prop="name">
<template slot-scope="scope">
<div class="tab_header">
<span style="font-weight:600;">{{scope.row.name}}</span>
<div class="operate">
<span @click="handleEdit(scope.$index, scope.row)">修改</span>
<span @click="handleDelete(scope.$index, scope.row)">删除</span>
</div>
</div> <!-- 这里要实现 多个表格共用一个表头，故需做判断，当表格要渲染的数据为default这个数组的时候，才显示表头的label值 -->
<!-- 注意：当label无值的时候，还是会占用空间，故当前表格在页面上会出现一个代表表头的空行，需要手动更改（重写）Element表格的 thead样式 -->
<div v-for="item in (scope.row.ext)" :key="item.id">
<el-table :data="item" border :class="item!==scope.row.ext.default?'tab-thead-style':''" style="box-sizing: border-box;border-top:none;" :span-method="objectSpanMethod">
