如何二次封装el-table

项目中使用了Element UI的表格组件el-table，按照官方提供的写法，展示的列越多，代码量也就越大。如果是开发后台管理系统，需要用到统计的地方有很多。不把时间花在重复的工作上，封装el-table，作为组件引用，只需要少量的配置，就能极大的提高开发效率。
el-table需要面对的场景多种多样，业务不同，呈现出的样式也不同，根据使用的难易程度，把它分为：

• 1、显示数据从父视图传递，集成只需要一行代码的简易表格——
• 2、集成需要配置请求接口、查询参数，有分页，组件内请求数据的表格——

一、simpleTable

SimpleTable

参数	说明	类型	默认值
headerBgColor	表头背景色	String	white
fixHeight	是否固定表格高度	boolean	false
tableH	表格高度(fixHeight为true, 则tableH必须设定)	number	0
isShowSelection	是否开启选择功能	boolean	false
isShowSerialNumber	是否显示序号	boolean	true
isShowOperation	是否显示操作列	boolean	true
isShowSummary	是否显示总计	boolean	true
fixedType	是否固定右侧操作栏	boolean	false
props	列标题以及对应的参数名数组	Array	[]
tableData	后台返回的数据	Array	[]

Table Events

事件名	说明	参数
selectionChange	当选择项发生变化时会触发该事件	row

使用方式：

二、myTable

myTable

参数	说明	类型	默认值
headerBgColor	表头背景色	String	white
fixHeight	是否固定表格高度	boolean	false
tableH	表格高度(fixHeight为true, 则tableH必须设定)	number	0
isShowSelection	是否开启选择功能	boolean	false
isShowSerialNumber	是否显示序号	boolean	true
isShowOperation	是否显示操作列	boolean	true
isShowSummary	是否显示总计	boolean	true
fixedType	是否固定右侧操作栏	boolean	false
props	列标题以及对应的参数名数组	Array	[]
tableData	后台返回的数据	Array	[]
immediate	是否创建即请求数据	boolean	true
isShowPagination	是否显示底部的分页器	boolean	true
isSecondLayer	是否有分页	boolean	true
isPost	是否为post请求	boolean	true
isCustomTime	起始时间划分为两个参数的情况	boolean	false
isArray	返回数据是否为数组形式	boolean	true
query	查询参数	Object	{ }
action	请求接口	String	必传
dataList	获取data数据的key值	String	r.data[dataList]

使用方式：

• 1、数据结构为非数组，只显示一行的统计类表格

data：{
    redAmount: "632.00"
    people: 3
    gift: 11
}

• 2、常用统计表