vue 封装table的多级表头的实现

开发中总是会遇到各种UI设计的图表，最近也一直“沉浸”在负责的两个专门做数据可视化的项目中，其中有个表格很好玩，效果如下图：（也不知道会不会压缩）

本项目主要使用VUE、Echarts、Element UI，来吧，直接开始了。
第一步：咱们需要重新封装table组件。

<el-table :data="tableData">
  <el-table-column
     v-for="(item, index) of tableColumns"
     :key="index"
     :prop="item.key"
     :label="item.title">
  </el-table-column>
</el-table>

第二步：自己写写样式吧，各有所需哈！
第三步：根据tableColumns处理表头。

<el-table-column
  v-for="(children, index) in tableColumn.children"
  :label="children.title"
  :prop="children.key"
  :key="index">
  <template slot-scope="scope">
    <span>{{scope.row[children.key]}}</span>
  </template>
</el-table-column>

第四步：表头数据

tableColumns: [
	{
	  title: '序号',
	  key: 'index',
	  width: '30%',
	  children: []
	},
	{
	  title: '姓名',
	  key: 'name',
	  width: '50%',
	  children: []
	},
	{
	  title: 'val1',
	  key: 'val1',
	  width: '20%',
	  children: [
	    {
	      title: 'a',
	      key: 'a'
	    },
		\\ ...
	  ]
	},
	// ...
	{
	  title: 'other',
	  key: '',
	  width: '20%',
	  children: [
	    {
	      title: 'a',
	      key: 'a'
	    },
		\\ ...
	  ]
	}
]

第五步：我们后台给我弄了个好玩的数据，格式如下，更不适用与饿了么的table组件了，所以所以，咱们处理处理。

{
	"name": "",
	"a": "",
	\\ ...
	"val1"{
		"a": "",
		\\ ...
	},
	\\ ...
}

第六步：处理数据中的对象，其实很简单，用个过滤器就好啦！！

过滤器：
filters: {
   filterValue: function (value, key) {
     if (!value) return '';
     return value[key];
   }
 }

使用：
<span>{{scope.row[item.key] | filterValue(children.key)}}</span>