表格中我们经常需要动态加载数据， 如果有多个页面都需要用到表格， 那我希望可以有个组件， 只传数据过去显示， 不用每个页面都去写这么一段内容：
<el-table :data="tableData" border size="mini" fit highlight-current-row height="500">
<el-table-column type="index" align="center" fixed></el-table-column>
<el-table-column prop="DHM" min-width="140px" label="时间" align="center"></el-table-column>
<el-table-column prop="PLAZANO" min-width="100px" label="编码" align="center"></el-table-column>
<el-table-column prop="PLAZANAME" min-width="100px" label="名称" align="center"></el-table-column>
<el-table-column prop="CAR_PLATE" label="号码" align="center"></el-table-column>
<el-table-column prop="CARD_NO" min-width="120px" label="卡号" align="center"></el-table-column>
<el-table-column prop="DATATYPE" label="数据类型" align="center" :formatter="formatDATATYPE"></el-table-column>
<el-table-column prop="STAFFNAME" min-width="100px" label="姓名" align="center"></el-table-column>
<el-table-column prop="MEDIATYPE" label="付款方式" align="center"></el-table-column>
<el-table-column prop="COMP_CASH" label="计算费额" align="center"></el-table-column>
<el-table-column prop="FACT_CASH" label="实收费额" align="center"></el-table-column>
<el-table-column label="操作" min-width="140px" align="center">
<template slot-scope="scope">
<el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
<el-button type="text" size="small">编辑</el-button>
</template>
</el-table-column>
</el-table>上面这段代码是一个element-ui中tabele表格的形式，这里表头都是已经固定的， 如果每个页面都写上这么一段， 不同的是表头名字和字段，这样子就有点重复，而且页面的篇幅也就比较大了，于是把这块写成一个组件， 每个页面引入这个组件， 再传入数据。
1. 表格组件：
•首先 table.vue 组件可以这样写：
<el-table :data="tableData" border size="mini" fit highlight-current-row height="500" :row-style="rowStyle" @row-dblclick="rowDblclick"
v-loading="loading"
element-loading-text="拼命加载中"
element-loading-spinner="el-icon-loading"
element-loading-background="rgba(0, 0, 0, 0.3)">
<el-table-column type="index" align="center" fixed></el-table-column>
<!-- prop: 字段名name, label: 展示的名称, fixed: 是否需要固定(left, right), minWidth: 设置列的最小宽度(不传默认值), oper: 是否有操作列
