基于element-ui表格的二次封装实现

　　项目中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){
　　....
　　}

　　上述只是大概的雏形，有些微变动可以依照需求更改。