項目中element的表格，每次都cv很麻煩，可以用表格進行了二次封裝，寫一個Table組件。

　　首先，下面是表格樣式

　　<el-table
　　:data="tableData"
　　:header-cell-style="headerStyle"
　　:height="height"
　　:border="border"
　　@selection-change="handleSelectionChange"
　　>
　　<el-table-column
　　v-if='selection'
　　type="selection"
　　width="55">
　　</el-table-column>
　　<el-table-column
　　v-for="v in tableProp"
　　:key="v.label"
　　:prop="v.code"
　　:sortable='v.sortable'
　　:label="v.label"
　　:width="v.width"
　　>
　　<template slot-scope="scope">
　　<div v-if='!v.code'>
　　{{ scope.row[scope.column.property] }}
　　</div>
　　<div v-else>
　　<slot name="row" :row="scope.row"></slot>
　　</div>
　　</template>
　　<el-table-column
　　v-for="(item, i) in v.data"
　　:key="i"
　　:sortable='item.sortable'
　　align="center"
　　:width="item.width"
　　:prop="item.code"
　　:label="item.label"
　　>
　　<template slot-scope="scope">
　　<div v-if='!v.code'>
　　{{ scope.row[scope.column.property] }}
　　</div>
　　<div v-else>
　　<slot name="row" :row="scope.row"></slot>
　　</div>
　　</template>
　　</el-table-column>
　　</el-table-column>
　　<el-table-column label="操作" v-if='ishandle'>
　　<template slot-scope="scope">
　　<slot name="edit" :row="scope.row" :index="scope.$index"></slot>
　　</template>
　　</el-table-column>
　　</el-table>

　　tableData為當前顯示的數據，tableProp為表頭的名稱，可以為多級也可以為單級，區別為data是否存在，headerStyle為表頭樣式，height為表的高度，sortable以該列為基準的排序，border是否顯示邊框,handleSelectionChange多選，selection是否顯示多選，ishandle是否顯示操作，下面使用插槽進行寫操作

　　export default {
　　props: {
　　height: {
　　type: Number,
　　default: 220,
　　},
　　ishandle:{
　　type: Boolean,
　　default: false,
　　},
　　border:{
　　type: Boolean,
　　default: false,
　　},
　　tableProp: {
　　type: Array,
　　default: () => [
　　{
　　code: 'index',
　　label: '指標',
　　width: 100,
　　},
　　{
　　code: 'PAC',
　　label: 'PAC',
　　width: 120,
　　data:{
　　code: 'PAB',
　　label: 'PAB',
　　width: 60,
　　}
　　},
　　{
　　code: 'PAM',
　　label: 'PAM',
　　width: 60,
　　code:true,
　　},
　　{
　　code: 'POWER_CONSUMPTION',
　　label: '綜合電耗(kW·h)',
　　width: 50,
　　},
　　{
　　code: 'WATER_CONSUMPTION',
　　label: '自用水率(%)',
　　},
　　],
　　},
　　tableData: {
　　type: Array,
　　default:() => [
　　{
　　index:1,
　　PAC:'1'
　　PAM:'1',
　　POWER_CONSUMPTION:'1',
　　WATER_CONSUMPTION:'1'
　　}
　　]
　　},
　　Style:{
　　type:String,
　　default:'font-size: 12px;padding:0;line-height: inherit;font-weight: 500;color: #6A7474;'
　　}
　　},
　　data() {
　　return {
　　show: false,
　　};
　　},
　　methods: {
　　// 樣式
　　headerStyle() {
　　return this.Style;
　　},
　　// 多選
　　handleSelectionChange(val){
　　this.$emit('SelectionChange',val)
　　}
　　},
　　};

　　第二步加分頁

　　<el-pagination
　　:background='background'
　　:layout="layout"
　　:total="total"
　　:page-size="pageSize"
　　:current-page.sync="current"
　　:page-sizes="pageSizes"
　　@size-change="handleSizeChange"
　　@current-change="handleCurrentChange"
　　:hide-on-single-page='singlepage'
　　>
　　</el-pagination>

　　background背景是否顯示，layout組件布局，子組件名用逗號分隔，total總條數，pageSizes每頁顯示個數選擇器的選項設置，current當前頁碼，pageSize每頁顯示條目個數，singlepage只有一頁時是否隱藏,handleSizeChangepageSize 改變時會觸發,handleCurrentChange改變時會觸發

　　export default {
　　props: {
　　background: {
　　type: Boolean,
　　default: false,
　　},
　　layout:{
　　type: String,
　　default: 'total, sizes, prev, pager, next, jumper',
　　},
　　total:{
　　type: Number,
　　default: 100,
　　},
　　pageSize:{
　　type: Number,
　　default: 10,
　　},
　　pageSizes:{
　　type: Array,
　　default: () => [10, 20, 30, 40, 50, 100],
　　},
　　singlepage: {
　　type: Boolean,
　　default: false,
　　},
　　current:{
　　type: Number,
　　default: 1,
　　},
　　},
　　methods: {
　　// pageSize 改變時會觸發
　　handleSizeChangepageSize (val) {
　　this.$emit('handleSizeChangepageSize ',val)
　　},
　　// currentPage 改變時會觸發
　　handleCurrentChange(val){
　　this.$emit('handleCurrentChange',val)
　　}
　　},
　　};

　　在頁面中使用

　　先引入Table.vue頁面

　　<Table
　　:height="90"
　　class="left-top-table"
　　:tableData="tableIndex"
　　:tableProp="tableProp"
　　@handleCurrentChange='handleCurrentChange'
　　@handleSizeChangepageSize ='handleSizeChangepageSize '
　　>
　　<template slot="edit" slot-scope="scope">
　　<el-button size="mini" @click="handleEdit(scope.index, scope.row)"
　　>編輯</el-button
　　>
　　</template>
　　</Table>

　　//pageSize 改變時會觸發
　　handleCurrentChange(val){
　　....
　　}
　　// currentPage 改變時會觸發
　　handleSizeChangepageSize (val){
　　....
　　}
　　// 編輯方法
　　handleEdit(index,row){
　　....
　　}

　　上述只是大概的雛形，有些微變動可以依照需求更改。