Vue+ElmentUI 实现表格可变表头，可变多级表头，自定义报表

首先、创建MyColumn.vue

这里是创建行列子组件对表格的表头进行赋值，行格式进行设置

<template>

  <el-table-column :prop="col.prop" :label="col.label" align="center"><!-- 就按照VUE行所具有的属性，对行进行属性设置 -->
	  
    <template v-if="col.children">  <!-- 这里是判断是否含有子节点，用于多级表头-->
      <my-column v-for="(item, index) in col.children"
        :key="index"
        :col="item"></my-column>
    </template>

  </el-table-column>
</template>

<script>
export default {
  name: 'MyColumn',
  props: {  /* 这里需要声明一个col属性，这样父组件才方便传递数据*/
    col: {
      type: Object
    }
  }
}
</script>
<style scoped>
</style>

其次、创建MyTable.vue

这里创建表格子组件，并且引入行列子组件从而封装成表格

<template>
  <div >
    <el-table :height="tableHeight" size="mini" stripe border :data="data"><!-- 同理使用VUE关于表格相关属性定义即可 -->
      <my-column v-for="(item,index) in col"  :key="index" :col="item" ></my-column><!-- 这里传入参数col 这里不可编辑行属性，应该在MyColumn中定义 -->
    </el-table>
  </div>
</template>

<script>
import MyColumn from './MyColumn'
export default {
  components: {
    MyColumn
  },
  props: { /* 这里需要声明两个分别是col属性和data，col是表头数据，data是表格数据*/
    col: {
      type: Array
    },
    data: {
      type: Array
    }
  },
  computed: {
  	// 表格高度（这里是根据我的需求定义的表格高度，根据自身需求添加）
  	tableHeight: function() {
  		return this.$store.state.bodyHeight - this.$store.state.withPageHeight;
  	},
  },
}
</script>
<style scoped>
</style>

最后、使用

最后使用引入MyTable.Vue传入相关参数既可

//使用
<my-table :col="col" :data="TableData"></my-table>

//js中引入
	import MyTable from './MyTable'

//组件中注明
		components: {
			MyTable
		}

使用细节

col表头返回的数据格式，当含有子节点时返回children，没有时不要返回children

返回数据格式如下

   {label: '一级表头',
   prop:"",
   children:[
   {
   label: '二级表头1',
   prop: 'filed1'
   },
   {label: '二级表头2',
   prop:'filed2''
   } ]
   }

附赠springBoot后端为空不返回属性注解

	//为空不返回
	@JsonInclude(JsonInclude.Include.NON_EMPTY)
	private List<T> children;